Diseño de UI/UX, patrones de diseño de la interfaz de los usuarios: imparte un instructor de UI

1. 1 clase agregada de patrones de diseño: Bienvenido al curso de patrones de diseño de interfaz de usuario. Mi nombre es Erin Lawrence y soy diseñadora Principal de UX y fundadora de una agencia UX llamada UX honey en San Francisco, California. También soy instructor de UX donde imparto diseño avanzado de UX en la Academia de Arte Universidad, también aquí en San Francisco. Este curso es una guía muy práctica para entender la experiencia del usuario y patrones de diseño de la interfaz de usuario. Los patrones de diseño son un conjunto de directrices y reglas de la interfaz de usuario que se refieren a cómo los usuarios utilizan los productos y los elementos de la interfaz de usuario. Una comprensión de estos patrones es una necesidad para cualquier diseñador de UX o UI. Estas son cosas como campos de formulario y desplegables y barras de navegación y casillas de verificación y botones de radio y tabuladores y selladores de fecha, etc. Si estás planeando hacer diseño de experiencia de usuario o diseño de interfaz de usuario. Y no tienes una comprensión firme de estos patrones de diseño. Eso es como ser un panadero de pasteles y no saber nada de los ingredientes de la torta. Porque esencialmente son los ingredientes los que componen un pastel. Y lo mismo ocurre con el diseño de la interfaz de usuario. diseño de la experiencia del usuario, o el diseño de UX, tiene mucho que ver con la comprensión de las necesidades del usuario y qué contenido necesita para lograr su objetivo. Y este contenido es lo que hace que la interfaz. En otras palabras, una interfaz de usuario es sólo bienes raíces para el contenido. Y entender cuál es la mejor inmobiliaria para usar para contenidos específicos tiene mucho que ver con los patrones de diseño y los componentes de la interfaz de usuario. De eso se trata esta clase. Cada video dentro de la clase, haremos una inmersión profunda y cubriremos un siguiente tema o componente de experiencia de usuario. Vamos a empezar con cosas como campos de formulario, botones, desplegables, selladores de fecha, botones de radio, casillas de verificación, alterna, formularios de dirección, Foros de búsqueda, barras de pestañas, barras de título, acordeones, pestañas, información sobre herramientas, sombras, miniaturas, carruseles, modales, lightbox como menús y cajones, magos, pan rallado, paginación, iconos, fotos, y todos estos temas tendrán explicaciones, ejemplos del mundo real, mejores prácticas sobre cómo usarlas, ¿por qué las usas? Y mi favorito vamos a tener ejemplos de hacer y no no hay también. He incluido todo el material fuente dentro de la clase que puedes descargar y puedes guardar para siempre. Y también puedes descargar el archivo Figma que utilicé para esta clase para que puedas tenerlo dentro tu aplicación Figma, también para siempre. Y también como bono, vamos a tomar todos esos patrones de diseño. Y he agregado un área extra a la clase. Bueno, eso es más basado en proyectos, donde vamos a usar la herramienta de diseño figma. Y construiremos todos estos componentes para ver cómo se ven y cómo usarlos en prototipos en vivo. Cosas como botones de radio personalizados donde el estado de flotación y el estado de selección aquí. Haremos menús que se deslizan adentro, deslízate hacia fuera. Haremos modales, acordeones que utilizan técnicas de animación inteligente dentro de Figma. Haremos validación en línea y aprenderemos todo sobre validación en línea en la clase. Y luego lo aplicaremos a un prototipo para permitir que alguien vea los requisitos de contraseña, validar ya que ingresan una contraseña que tenga los requisitos correctos y presione Crear. Haremos hilanderos animados aquí para imitar la carga de la creación de cuenta, haremos desplegables que imiten el desplazamiento de un desplegable real y el estado de selección. Y luego iremos a aprender a hacer esto en dispositivos móviles también. Más. Y lo que es genial es que también he construido un archivo completo de Figma donde la fila superior de cada una de las secciones aquí ha sido diseñada lista para ir prototipo que puedes usar un ejemplo pick apart. Y luego durante los videos pasaremos por cada uno de estos y lo haremos juntos para todos estos diferentes tipos de patrones de diseño. Y también haremos lo mismo por todos los patrones móviles también. Por lo que no sólo estás obteniendo las mejores prácticas y lo haces y no. También te vas a ensuciar las manos y aprender a hacerlo dentro de la herramienta de diseño figma. Esta clase es genial para que cualquiera que estudie se convierta en diseñador de UX o diseñador de UI. O si ya estás en el campo y quieres repasar estos patrones. Muy bien, esa es la intro. Me llamo Erin Lawrence y espero que disfruten de la clase. 2. Estructura de clases: Antes de empezar a la clase, quería hacer un video rápido sobre la estructura de cada video y lo que vamos a cubrir. Cada video va a pasar y profundizar profundamente en un componente de interfaz de usuario y los patrones de diseño existentes que se asocian a ese componente. Cada uno, voy, voy a dar una breve explicación de cuál es el componente, los orígenes del componente. Hablaremos de pros y contras. Hablaremos de casos de uso para ese componente. Mostraré cómo se construye, cómo son los diferentes estados del componente, cómo se ve. Vamos a ver ejemplos de la vida real. Te mostraré cómo combinar componentes existentes juntos. Haremos y no por el componente. Puedes decir lo mismo aquí para pestañas. Nuevamente, los orígenes, qué es una pestaña, ejemplos de mejores prácticas móviles y web. Y de nuevo, terminaremos en hacer y no para cada componente. Muy bien, nos vemos pronto. 3. Introducción a la clase: Muy bien, Bienvenido a la clase. Esto es solo una rápida introducción de lo que se puede esperar para la clase. Y también voy a hablar un poco sobre diseño de UI y los patrones de diseño y diseño de UX también. Pero acaba de empezar desde la cima. Sí, el diseño de interfaz de usuario es el proceso que usan los diseñadores para construir interfaces y sistemas operativos de software o dispositivos. Nuevamente, enfocándose en el contenido y la usabilidad y también en la jerarquía de contenidos. Y el diseño de UX es el estudio de entender las necesidades de tus usuarios y cómo usan una aplicación específica o experiencia de usuario. Hay mucha superposición entre los diseñadores de UX y UI. El diseñador de interfaz de usuario está traduciendo estas necesidades de usuario que provenían de sus pruebas de observación o su investigación en la jerarquía de contenido y contenido. Y este conjunto de información se utilizará se muestran dentro de la experiencia de usuario de una aplicación. Ser un buen diseñador de interfaces significa que tienes una sólida comprensión de qué jerarquía de contenido y contenido necesitas diseñar. Y lo más importante, qué tipos de componentes y patrones inmobiliarios de UI se comunicarán mejor y servirán a esta jerarquía de contenido y contenido. Aquí es donde entender los patrones de diseño es súper útil y de eso se trata esta clase. Los patrones de diseño son solo un conjunto de directrices y reglas de la interfaz de usuario que se refieren a cómo los usuarios usan los productos y elementos de la interfaz de usuario y comprensión de estos patrones de diseño. Es una visita obligada para que cualquiera lo haga en el diseño de UX o UI. Y estas son cosas como campos de formulario y desplegables y barras de navegación y tabuladores. Y me meteré todo en eso aquí en el siguiente segundo. Los patrones de diseño son extremadamente útiles, sobre todo porque nos ahorran tiempo y dinero y nos obtienen mejores resultados más rápido y más rápido. Y esta es una filosofía fundamental para el desarrollo ágil de aplicaciones. Y pide a los diseñadores que podamos aprovechar estos patrones y usarlos en nuestra toma de decisiones diarias de diseño. Porque estos patrones y estos componentes se utilizan todos los días a través de muchas experiencias de usuario. Y los usuarios no se han acostumbrado a cómo eran estos patrones. Por lo que esencialmente sabemos que funcionan y podemos aprovecharlos día a día. Este curso te va a dar una guía muy práctica para entender cuáles son estos patrones de diseño de interfaz de usuario, y cómo los diseñadores los usan, ¿qué reglas se les aplican? Mundo real, ejemplos de la vida real. Cada uno tendrá do do y don'ts para cada componente. Y de nuevo, dominar estos patrones y componentes te ayudará a convertirte en un mejor diseñador, pero también te convertirá en un mejor tomador de decisiones sobre qué bienes raíces de UI usar para el contenido y jerarquía de contenido en la que estás trabajando. Así que de nuevo, te va a hacer más rápido, te hará mejor. Y te ayudará a aplicar una buena lógica de decisión sobre por qué utilizaste un determinado diseño o patrón de diseño dentro de tu diseño. Vamos a cubrir un montón de cosas. Vamos a cubrir campos foráneos, botones, desplegables, recolectores de fecha, botones de radio, casillas de verificación y alterna. Abordar foros y buscar Formularios. Barras de pestañas tituladas barras, acordeones y pestañas , información sobre herramientas y sombras, miniaturas y carruseles, modales, cajas de luz, menús y cajones , magos, pan rallado, paginación, iconos y fotos, y cada una de esos ejemplos, nuevo, vamos a tener mejores prácticas de donde venían, cuándo usarlas, cuándo no usarlas. Y vamos a tener hacer y no es en esos también. Entonces al final, de nuevo, esta es toda una gran información. Si vamos a ir al siguiente nivel, si quieres, vamos a aprender a hacer que todos estos dentro de Figma y Figma como herramienta de diseño. Y voy a suministrar un expediente. Y ese archivo se ve algo así. Ya está preestablecido, prediseñado. Lo que vamos a hacer es que vamos a pasar y crear todos los diferentes componentes de los que hablamos y diseñar patrones de los que hablamos en la clase, como cosas como botones de radio personalizados o incluso justo lo que son los botones de radio. Vamos a crear modales, son menús como este y cerrarlo va a hacer modales. Y aprenda a, no sólo a aprender sobre estos patrones y cómo hacerlos y las mejores prácticas, sino que aprenderemos a hacerlos también hacia el final. Tenemos acordeones aquí. Se puede tipo de ver esa interacción, validación en línea para la creación de cuentas aquí, poniendo spinners dentro de un botón aquí para mostrar estados de carga. Y vamos a hacer desplegables y cómo hacer estos en Figma también. Incluso vamos a hacer todos estos para aplicaciones móviles también. Aprende a hacer esto en prototipos móviles también. Por lo que cubriremos las mejores prácticas web. Haremos esto también en móvil. Y aplicaremos todos estos patrones que vamos a aprender dentro de la herramienta de diseño figma, tener todos los archivos listos para funcionar. Entonces todo lo que necesitas hacer es descargar el archivo. Tengo el ejemplo preconstruido hacia fuera para que puedas separarlo. Durante la clase, lo que vamos a hacer es que lo vamos a ver y ver cómo funciona y luego vamos a construirlo juntos. Así que va a ser súper divertido, es atractivo. Y espero verte ahí y te veré en la próxima clase. Adiós. 4. Materiales para la clase: De acuerdo, solo quería hacer un breve video sobre el material de la clase mostrando tomar unos 30 segundos o un minuto aquí, tengo dos tipos diferentes de formatos. Tengo todo el material en formato PDF, que abriré aquí en un segundo y te mostraré. También tengo todo el material construido dentro de Figma, la herramienta de diseño. He incluido este archivo, es un punto, es clase Figma archivo dot zip. Basta con hacer doble clic en ese archivo. Y se va a abrir una carpeta. En esa carpeta tengo un archivo Figma dot config file, y también tengo instrucciones de clase sobre cómo abrir este archivo, pero me imaginé que voy a hacer un video por ti también. Solo lo que debe señalar, si abre el archivo Figma es no puede hacer doble clic en el archivo Figma y abrirlo. Recibirás este error aquí. Y estoy en un Mac aquí, solo cabezas arriba. Lo que tienes que hacer es que tengas que, tienes que arrastrar este archivoa arrastrar este archivo las secciones de borradores tu aplicación Figma aquí en la parte superior izquierda. Tu sección de borradores puede parecer un poco diferente a mía ya que tengo todos estos archivos aquí. Por lo que de nuevo, borradores secciones arriba a la izquierda. Vamos a agarrar este archivo Figma, arrástrelo. Verás este contorno azul alrededor de la herramienta Figma. Eso es genial. Eso significa que Figma va a abrir esto y vamos a hacer clic y arrastrarlo. Y este es un archivo grande. Puede tardar un segundo para que Figma abra eso. Si bien eso se abre, puedes tomar cualquiera de estos formatos aquí, material en formato PDF, y esto sigue junto con la clase. Entonces la primera clase que vamos a hacer campos de forma. Nuevamente, son un archivo grande, así que tengo que hacer es abrir en una aplicación de vista previa, acercar. Entonces solo puedes navegar desde aquí, ir desde el principio, y trabajar tu camino a través de la derecha de la clase y tener todo este material aquí. De nuevo, soy un gran fan. Deberías simplemente tener estas cosas para siempre, ya sea que lo tengas en formato PDF o en formato Figma. Vamos a ver a Figma. Está bien, genial. Por lo que sigue cargando el archivo. Y así de nuevo, como dije, es un archivo grande. Bien, genial. Se había cargado. Así que vamos a seguir adelante y abrirla muy rápido. El beneficio del archivo Figma aquí es que todos estos son componentes vivos, lo que significa que puedes entrar y agarrar estos elementos y usarlos para tus diseños. Como dije, vamos a hacer una clase al final donde vamos a construir todo esto. Pero estos son todos en vivo. Puedes acercar a Figma, digamos que quieres este selector de fecha aquí. Puedes entrar y agarrar este selector de fecha. Tengo todos los campos de formulario. Tengo un montón de botones aquí puedes agarrar y usar y formar campos por aquí son diferentes estilos en los que puedes entrar y usar y todos son componentes en vivo que puedes agarrar. No he tenido un montón de iconos por aquí que puedas agarrar dos. Así que de nuevo, si tú, respecto al material de clase, si quieres el archivo Figma o también quieres el formato PDF, realmente no importa. Ni siquiera necesitas esto. Los videos son geniales, cubren mucho buen contenido, pero como dije, soy creyente, debes tener este material para siempre y referirte a él siempre que lo necesites. Te veré más tarde. Adiós. 5. Campos de forma: Muy bien, bienvenidos a formar campos. Los factores de un campo de buena forma son sólo un par de cosas. Y luego nos adentraremos en diferentes estilos y estados comunes y nos sumergiremos profundamente en campos de forma y casos de uso para ellos, pero sobre todo son fáciles de leer. Tienen textos claros etiquetados y textos de forma. Son fáciles de hacer clic en un texto de entrada. Hacen buen uso de los textos fantasmas y hablaré mucho de los textos fantasmas, que es un atributo importante de un campo de formulario y tiene un estado definido como el error de desplazamiento activo deshabilitado. Me pondré en diferentes ejemplos de esos estados. Cuenta con bienes raíces para mensajes de error y tiene un claro mensaje de error de lo que erró y qué campo de formulario no error. Y es fácil entender qué campos de formulario se requieren, así como qué campos de formulario son opcionales. Vamos a entrar en algunos estilos llenos de forma. Hay cinco estilos más comunes de campos extranjeros que se ve a través de toda la web y las aplicaciones. Una cosa a mencionar también, es que los campos de formulario son súper importantes ahí. En realidad uno de los elementos de interfaz de usuario más importantes dentro experiencia del usuario y las aplicaciones que tenemos. Sólo porque extrae información de nuestros usuarios. Conocemos información sobre ellas. Ayuda a construir contenido. Es esa barrera entre nuestra aplicación, o es el embudo de comunicación entre nuestra aplicación y nuestro usuario. Si el usuario quiere decirle algo a tu aplicación, va a suceder en un campo de formulario. También es importante para nuestros servicios empresariales como si eres una empresa que vende producto del que necesitas gente para comprarte producto. Y cuando subproducto se están involucrando en un campo de formulario. Entonces, como diseñador de UX, es importante que tengamos un muy buen sentido de las reglas, las mejores prácticas y los patrones entre los campos de forma. Lo primero que tenemos aquí es un formulario esbozado rellenado. Esto es más común. Este es el estado predeterminado, lo que significa que este es el estado, pero eso no está flotando ni inputado todavía, solo el primer estado en el que el usuario vería un formulario de esquema. Es solo el rectángulo aquí, y le tiene un color gris delineado. Y luego tenemos aquí los textos etiquetados. Esto sería como nombre. Y luego tenemos los textos fantasmas. Esos textos fantasmas son en realidad un secreto. Es, es una oportunidad estratégica para que aprovechemos esto. Y hay tantas funciones y secretos diferentes en la industria de cómo elaborar estrategias de tus textos fantasmas para comunicar el formato que deseas para tu usuario. O diseñarla para mostrar a la comunidad el objetivo de comunicación que queremos para el usuario o para incitar a su usuario en esta información, ¿verdad? Entonces eso se llama los textos fantasma. Hablaré mucho de eso. Nuevamente, una buena forma rellenada tiene un mínimo de 50 píxeles de altura, y luego el ancho solo depende del contenido aquí. Este ejemplo de 350 píxeles de ancho, pero realmente depende del ancho de tu forma, del contexto y del contenido que se va a escribir dentro de este campo de formulario. Digamos que era un nombre o un correo electrónico. Vas a querer un campo de forma más largo. Si es un número de teléfono, entonces es posible que solo quieras uno corto como este. El segundo estado, es un formulario rellenado. Y esencialmente son los mismos contextos. Tenemos los textos fantasmas, tenemos la etiqueta, solo está llena en lugar del contorno, tenemos un color de campo aquí. Entonces tenemos un formulario de interfaz de usuario material. mismo tipo de principio aquí. Tiene un texto fantasma y una etiqueta. Es sólo en lugar de un contorno, está usando un rectángulo. Es usar solo una línea para indicar dónde está el formulario. Esta es la interfaz de usuario material fue creada por Google y este tipo de estilo, un campo de formulario es común en productos de Google y dispositivos Android. También tienes una interfaz de usuario material sin el título. A esto se le llama flotador etiquetado donde el título es reemplazo de los textos fantasma. Y lo que sucede aquí es que Eso se llama etiqueta de flujo porque cuando el usuario hace clic en esta etiqueta o en este campo de formulario, verá el título o el texto de la etiqueta aquí flota. Y los textos fantasmas aparecen así. Pero en el estado predeterminado no hay textos fantasma. Es sólo el título aquí. Una cosa que típicamente no uso estos para personalmente es porque no muestran ese texto fantasma en el estado predeterminado. Los textos fantasma solo aparecen cuando el usuario hace clic para escribir información. Y así perdemos esa oportunidad elaborar estrategias de nuestros textos fantasmas en el estado predeterminado del campo del foro. introduce aquí información que ayude a servir a nuestros usuarios o les da indicaciones o consejos sobre el formato que esperamos que ingresen. También he usado estos antes en el pasado donde hemos tenido un formulario de una columna lleno de diseño como este. Donde puedas, tenías algo alrededor como nombre aquí y podrías decir un vestido o algo aquí. Me di cuenta cuando estábamos probando esto con personas mayores y un público mayor, en realidad no sabían dónde hacer clic. En uno, en un caso, el usuario realmente intentaba hacer clic en el nombre aquí. Esto pudo haber sido un poco más apretado aquí, y accidentalmente hicieron clic en la dirección porque la línea no es una indicación lo suficientemente fuerte del área del grifo como para hacer clic o tocar en el área objetivo o el área del grifo. Basado en esos, típicamente me mantengo alejado de ellos. Y se puede ver que cuando se utiliza la más común, que es esta forma de esquema aquí, esto tiene un buen sentido de área de tap. Se puede ver el rectángulo, ahí es donde va a suceder la entrada. Donde la interfaz de usuario material, es sólo esta línea aquí. Otra es, tenemos es una forma de contorno que tiene la etiqueta de flotador. Y de nuevo es sin el título. El título reemplaza el texto fantasma aquí. Y entonces, ¿qué pasa? Es el mismo principio cuando se pasa el puntero sobre el campo del foro. El título luego flota encima del texto fantasma aquí. Así. Mismo principio que escribo, típicamente mantente alejado de ellos solo porque no utilizamos los textos fantasma para las estrategias de comunicación al principio. Algunos de ellos eran todos los estados por defecto. Para los estados de hover tienen foros. Voy a pasar por esto rápidamente. Tu filosofía para flotar es que algo debe cobrarse vida cuando pasas el cursor, y por lo general debe ser de un color más brillante. Entonces si tienes un, a, un color como este formulario lleno aquí, entonces debería ser de un color más brillante en el estado de hover solo para que parezca más vivo. Esa es una especie de filosofía y principios alrededor del hover. Y nosotros hicimos lo mismo aquí por la forma de contorno. Acabamos de hacer azul el contorno. Dicho muy común desde la interfaz de usuario material se obtiene lo mismo para delinear va azul, ya sea una etiqueta de flotador aquí. Y entonces el mismo principio para el relleno del formulario de contorno que tiene la etiqueta de flotador es que acabamos de cambiar el color del contorno a un azul. Muy bien, al siguiente estado se le llama estado de entrada o enfoque. Y esto es cuando el usuario hace clic en el campo de formulario desde un hover AM o toca el campo de formulario. Y la tecnología fantasma cambia al cursor de tipo. Por lo que verás el cursor de tipo aparecer y los textos fantasma y la mayoría de los casos seguirán aquí hasta que el usuario empiece a escribir. Una vez que escriban la primera letra, entonces verás que esto desaparece. Los textos fantasma desaparecerán una vez que esa primera letra empiece a escribir. Muy bien, entonces este es el estado activo, lo que significa o lo siento, el estado de entrada o estado de enfoque. Y todo lo que significa es que el usuario está introduciendo información en este estado aquí, o están enfocados dentro del estado que hay. Tipo cursor está aquí, se enfocó en este campo de formulario. Y es la mejor práctica en hover usar eso. Un color brillante aquí, los azules. Pero cuando llegas al estado de entrada, es mejor solo ir con un gris más oscuro o incluso un negro, o puedes añadir un poco de azul al gris, como lo que hemos hecho aquí también. Pero lo mejor es pasar de este color claro para el estado predeterminado y luego un color más oscuro para el estado de entrada. Aquí. Se pueden ver los diferentes ejemplos aquí, igual para la interfaz de usuario material. Tenían. El azul para el hover solo se oscurece para el estado de entrada. Y luego lo mismo para los otros campos de formulario de etiqueta de flotación. Muy bien, por lo que el estado activo es más o menos una vez que el usuario ha escrito cualquier información dentro y sale, sale del campo de formulario. Este campo de formulario volverá al estado predeterminado. Lo único que cambia es el texto ingresado cambia a un color más fuerte. Muy bien, entonces usamos un color gris claro para el texto fantasma para indicar que no se ha ingresado nada aquí. Y por lo general esto parece un llamado a la acción, como pasante, nombre interno aquí, así. Y queremos poder oscurecer el texto para los estados de entrada. Entonces cuando el usuario escanea todo esto, pueden ver que esos fueron llenados. Nuevamente, lo mismo para el estado lleno. Si estamos usando un formulario lleno, tenemos un blanco más brillante. Y lo mismo para el estado de entrada aquí para los formularios de etiquetas de flujo. Genial. Entonces cada campo de formulario para la etapa de error, cada formulario debe tener su propio inmueble para mensaje de error, generalmente en la parte inferior. Y de nuevo, esto puede suceder cuando el usuario es o bien un mecanografía dentro del campo de formulario. Y tenemos lo que se llama validación en línea, que es cuando error al usuario dentro del campo de formulario. O sucede cuando presionan el botón Guardar o enviar o Siguiente. Y no cumplimos con los requisitos de este campo de formulario. Lo que no se cumpliera para un campo de formulario específico en lo que respecta a los requisitos, debería ser el mensaje de error aquí. Nuevamente, esos mensajes de error deberían ser muy claros en lo que erró. Podrías ver por los formularios de campo, solo podemos hacer que toda la forma sea roja para el contorno. Solo son las mejores prácticas solo para, solo para hacer el contorno rojo en el campo del foro, no necesitas hacer rojo con el texto ni nada por el estilo. Ni siquiera te vuelves demasiado loco. Todo lo que necesitas hacer es solo un poco sutil indicación de rojo para ayudar a señalar al usuario dónde mirar en su mensaje. Y rojo. Lo mismo para los formularios de interfaz de usuario material aquí y la otra etiqueta de flotador aquí. En el último estado que tenemos eso es común en campos de forma como el estado discapacitado. Entonces este es el estado en el que un usuario no puede involucrar o ingresar o editar ninguna de esta información. Y me gusta simplemente usar 30% de transparencia o un gris claro, o incluso puedes usar ambos. Muy bien, así que todos estos son 30% de opacidad aquí. De acuerdo, así que vamos a entrar en la profunda inmersión de los campos de forma ahora. Mira diferentes funciones. Veamos cómo podemos usar el texto fantasma para elaborar estrategias de las diferentes necesidades, un formato y entradas basadas en el campo de formulario que tenemos. Vamos a ver algunos campos de formulario comunes. Uno de ellos son los números telefónicos. Se puede ver el ejemplo de los textos fantasmas aquí es que está dando al usuario el formato que queremos que ingresen en el número de teléfono. No estamos pidiendo un 11. Sólo queremos aquí 1112223333, así. Y entonces lo que pasa aquí es que tenemos estos guiones que puedes ver aquí también. Y así cuando el usuario entra en este campo de formulario, auto poblamos los guiones para ellos. El auto, verán los guiones todavía aquí como parte del texto fantasma. Cuando llegan al primer número dos, y digamos que escribieron los dos siguientes. Les pondremos ese gallardo. No necesitan hacer guiones se auto, auto poblar eso para ellos. Después verás la finalización del campo de formulario una vez que esté hecho. La otra cosa también para saber es que si tienes un campo de formulario de teléfono móvil o un campo de formulario que está directamente ligado a solo números. Cuando estés en un dispositivo móvil, abre el teclado numérico. No abra el teclado de la letra y haga que el usuario regrese al teclado numérico. Esto también está en línea con por qué rellenamos automáticamente el guión, es que si tu usuario escribiendo como escribiendo esto en un teclado, todo lo que necesitan hacer es escribir los números en el teclado. Pueden tener un teclado que es una sección numérica a la derecha. Y luego en un dispositivo móvil, hay clave mal número, teclado se ve así. No necesitan entrar en ninguno de los guiones. Acaban de poner los números y lo haremos por ellos. Nuevamente. Va mucho, mucho atrás a eso, esa primera cosa de la que hablé aquí, que es affordance, la menor cantidad de tiempo y energía para completar una tarea. Entonces estos son grandes. Afordance, yo también hablaré mucho. Y el transportación también son súper importantes. Fecha de nacimiento. Es el mismo principio que usamos los textos fantasma para ingresar, para transmitir al usuario el formato en el que queremos que ingresen información. Queremos mes, mes, día, día, año, año, año. Y el truco con la fecha de nacimiento uno es como mecanografía del usuario, todavía mostramos los textos fantasma. No desaparece cuando el usuario empieza escribir y las barras, Oh, lo apuesto. Las barras se vuelven autopobladas también, ¿verdad? Entonces todo lo que necesitas hacer es en el teclado solo escribiendo los números. Y aquí está mi cumpleaños, 09131983. Las barras son todas autocompletadas para el usuario. Todo lo que tienen que hacer es escribir en el teclado. Malo, Boom, affordance, fácil, no hay problema. Cuando llegue esta fecha este año, ustedes pueden seguir adelante y llegar y enviarme un deseo o regalo de cumpleaños, lo que quieran, yo lo aceptaré felizmente. El formulario de correo electrónico es bastante simple. En lugar de escribir e-mail, solo muestra un correo electrónico falso. Puedes poner loco o puedes poner como nombre. Email.com solo muestra el formato en una diferencia aquí es que cuando el usuario escribe los textos fantasma se van, como aparece justo cuando hacen clic. Entonces tendrías que este cursor de teclado aparezca. Entonces esta cosa aparecería justo cuando ellos, sería un poco más oscuro, pero aparecería cuando empiecen a escribir. Y luego una vez que pongan esa primera palabra , desaparecerá. Pero no aparece como usamos aquí en la fecha de nacimiento ya que están escribiendo, sólo aparece una vez. Hacen click y una vez que escriben se va por completo. Por dinero lleno. Mismo principio, utilizamos los textos fantasma para mostrar la entrada y el formato que nos gustaría. Una vez que el usuario comienza a escribir, eliminamos los ceros. no mostramos los textos fantasmas, pero mantenemos el signo del dólar. signo del dólar no desaparece. Después añadimos comas. No necesitamos que nuestros usuarios agreguen comas para nosotros. Bueno, vamos a poner las comas, pero el usuario debe escribir el decimal. No rellenamos automáticamente el decimal, por lo que necesitan hacer un decimal. Déjenles eso a ellos. Números de tarjetas de crédito. Nuevamente, mira cómo estamos usando los textos fantasma. Se puede ver por qué me gustan los campos de formulario fantasma textos porque es una, Es un elemento aditivo que nos ayuda a elaborar estrategias de las necesidades de comunicación. Y así tenemos 111 espacio, 2222, espacio 333. Teníamos las indicaciones espaciales aquí. Lo que sucede aquí es cuando el usuario escribe, verá el número que está escribiendo. Pero todo lo demás se convertirá en balas. Solo ven el número ahí escribiendo para que puedan saber en qué están escribiendo el número correcto. Pero no estamos exponiendo todo el resto de los números de la tarjeta de crédito solo por razones de seguridad y seguridad. Y adivina qué? Nosotros auto poblamos los espacios para nuestros usuarios. No necesitan volver a hacer eso, todo lo que necesito hacer es simplemente golpearles números en el teclado o ese teclado. Y haremos el resto del formateo por ellos. Y entonces siempre mostramos los últimos cuatro por acaso el usuario tiene múltiples tarjetas de crédito. No lo sé. Digamos que tienes diez tarjetas de crédito y te fuiste a una juerga de compras en Amazon cuando estás borracho y ordenaste un montón de cosas que no necesitabas y acabaste como cuatro o cinco o tus tarjetas de crédito y realmente no te das cuenta de eso. Y luego tres días después, tu novia es como, ¿por qué hay como 50 cajas de cosas de Amazon en nuestra casa? Y entonces eres como, Bueno, no lo sé. Y luego miras tu historia de Amazon y estás como, Oh Dios mío, creo que pedí una billetera Gucci la otra noche cuando estaba borracho como, oh, eso no está bien. Entonces cuando vaya a comprar mi próximo Gucci Wally, no usaré las tarjetas que están al máximo y lo sabré porque voy a ver los últimos cuatro dígitos aquí. Acabo de maquillarme eso. No compré un abrigo agouti. Entonces lo siguiente son los campos de mensajes de forma libre. Son de forma gratuita porque realmente no tenemos un requisito de lo que el usuario va a ingresar. Por eso es una forma libre. Pueden ingresar cualquier cosa que quieran. Usamos esto mucho en UX como campos de retroalimentación. Si queremos. Los tenemos en algunas de nuestras aplicaciones donde entra un cliente y pueden ir a ver la aplicación de usuario. Y tenemos un área pequeña que dice darnos retroalimentación o aplicación de radar. Y abren esto y volvemos a usar los textos fantasma para elaborar estrategias de la pista o el prompt que nos gustaría obtener de nuestros usuarios. Entonces en este caso, siempre nos gusta escuchar acerca los problemas que enfrentan las personas cuando usan nuestro software. Pero nos encanta escuchar sobre las solicitudes de funciones, como si te encantara ver algo que está en la aplicación que no necesariamente hemos leído el momento. Utilizamos este texto fantasma aquí para ayudarnos a elaborar estrategias para que podamos obtener ese tipo de información de nuestros clientes y usuarios. También a veces van a tener un recuento máximo de personajes. Acabas de poner esto aquí en la parte superior derecha. Una vez que el usuario llegue a un recuento máximo de caracteres como este irá esta lectura de Coco. No podrán escribir más también. Por lo que tendrás dos niveles de reivindicación encendida. Ese tipo de requisito es que esto se pondrá rojo y en realidad dejarán de golpear. Una vez que teclea el teclado, no pasará nada. También tenemos este pequeño ícono expansor aquí. Entonces para los campos de formulario abiertos, como no sé si tal vez alguien que quiera escribir un párrafo bastante largo, 500 caracteres es una cantidad bastante larga. Para que puedan agarrar esto y puedan estirar el formulario rellenado hacia abajo y hacia arriba. Por lo que eso ayuda mucho para estos campos de formulario abierto. Muy bien, así que vamos a ver algunos requisitos de contraseña aquí. ¿ Cómo lo llamamos cuando decimos textos de chicas por defecto, eso significa que realmente no lo estamos usando para elaborar estrategias alguno de nuestros objetivos de comunicación. Muy bien, así que éste es sólo entrar contraseña, bastante simple. Creo que eso sucede con las contraseñas sin embargo, es que ni siquiera mostramos el carácter que el usuario está escribiendo. Si escribo un cinco, no mostramos los cinco. Viene como una bala. Por razones de seguridad y privacidad. Podemos agregar el pequeño ícono aquí, el ícono del ojo. Y cuando el usuario haga clic en eso, entonces revelaremos la contraseña, ¿verdad? Entonces el ícono III es como la gente está viendo , no muestres nada. Y luego cuando lo hagas clic y la ropa como la gente no está viendo, muéstrame, muéstrame mi contraseña. La diferencia entre un campo de formulario opcional y obligatorio. Es mejor mostrar solo texto que diga opcional y frente a otro. Cuando tengas un campo requerido, lo que verás son estos pequeños asteriscos aquí. Muy a menudo o no, la mayoría de sus campos de formulario van a ser requeridos. Entonces en lugar de tener todos los campos de formulario con estos pequeños asteriscos y no todo el mundo sabe que el asterisco es un campo de formulario obligatorio, como senior. Los usuarios mayores no se ponen en contacto con eso. Es posible que ni siquiera lo vean. Es mejor solo dejar todos tus campos de formulario requieren según sea necesario y luego escribir donde es el filtro de formulario opcional porque es mejor transporte. Y si volvemos a nuestra, nuestra guía aquí, transporte, ¿es fácil entender información en cuanto se relaciona con una tarea particular? Tan opcional. Escribir el texto opcional significa algo porque es texto, es opcional frente a un asterisco es algo muy abstracto. Al igual que PDD. No todo el mundo sabe lo que eso significa. Entonces cuando pensamos en información fácil de entender relacionada con la tarea, opcional hace mejor. Y entonces lo podrías hacer, tengo todo un video en tooltips verá que podrías hacer un ícono de info y esto te dará un consejo de herramienta sobre hover o si estás en la web, o haz click si estás en la web y luego toca si 're en dispositivos móviles y tabletas, mira, estamos usando los textos fantasma para elaborar estrategias más a lo que se dirige la secundaria. Ejemplo, departamento 111. Puedes usar texto fantasma aquí para indicaciones como helado favorito en lugar de como helado favorito inter, puedes hacer ejemplos como chocolate de vainilla, camino rocoso, todas esas cosas buenas. Recuerda que las personas se agarrarán a través de tus formularios. Usuarios más expertos en tecnología, presionarán pestaña en el teclado y se moverán por cada campo de formulario. Y esto permite al usuario evitar usar el mouse y tener que hacer clic fuera de un campo de formulario y hacer clic de nuevo en él. Nuevamente. Esto se remonta a esa palabra clave, affordance, Al menos cantidad de tiempo y energía para completar una tarea. Si ves aquí, así es como funciona. El usuario estará en el segundo campo. Acaba de completar este texto aquí. Presionarán pestaña en el teclado. La segunda fórmula, la que acababan de poner, volveremos al estado predeterminado. Y luego el tercer campo extranjero cuando la pestaña ahora estará en el estado de enfoque de entrada y listo para que comiencen a escribir. Para que puedan tabularse a través todos tus campos de formulario y nunca tendrán que hacer click en ese mouse. Vamos a meternos en algunas cosas y no. Una de las cosas que es común aquí es la diferencia entre un diseño de campo extranjero de una columna y una columna de dos que es más zigzag. El de la derecha. Se han realizado estudios con prueba de seguimiento ocular, prueba de tiempo también. Descubrieron que los usuarios pasan más tiempo saltando de una columna a la otra cuando hay una columna de herramienta aquí, tus ojos escanean en Z's aquí en lugar de moverse por los campos del formulario. Y cuando tienes un campo de forma de columna es psiquico psicológico, pero se desempeñó mejor porque sientes que estás completando más. Estás moviendo más por la lista, que se sintió como más terminación versus ir de izquierda a derecha. En realidad se encontró que el formulario de una columna rellenado con la misma cantidad de campos de formulario probados contra una columna uno de dos en realidad realizada era más rápido, la una columna fue más rápida que las dos columnas. Muy bien, así que volviendo a ese affordance otra vez, entonces las columnas individuales también hacen un mejor trabajo en transmitir qué campos de formulario. Si alguien toca la tecla, presiona tab en el teclado, ¿cuál va a ser la siguiente? ¿ Dónde se va a bajar dos columnas o va a ir el modelo correcto? Más a menudo que no, funciona en un patrón Z, ¿verdad? Va a ir a la derecha aquí y luego abajo por aquí. Pero los estudios funcionan y una columna forman campos, pueden tener más espacio en blanco. Es posible que no llenen tu interfaz de usuario si tienes un escritorio grande, pero son mucho más fáciles de escanear rápidamente y le dan al usuario una sensación de finalización a medida que se mueven rápidamente hacia abajo. Otro pequeño truco aquí es que puedes espaciarlos dos grupos diferentes, ¿verdad? Entonces si esto tenía que ver con el nombre como y esto tenía que ver con, no sé, la información del empleador. Simplemente usamos un poco más de espacio desde aquí para agrupar esa información juntos. Y ayuda más con el escaneo, poniendo la información en formas sistemáticas. Se puede ver por qué esto es importante, por qué estos campos de formulario y aprender esto es importante es que esta empresa hizo un estudio sobre las razones por las que la gente abandonó su página web durante el checkout. Nuevamente, el 50% de ellos fue porque sus cosas eran demasiado caras. Tenían demasiado altas tasas de compra e impuestos y gastos de envío e impuestos y demás. 28% dijo que el sitio quería crear una cuenta. Tenían un muro de cuenta. No dejaron a un usuario al igual que el pago de invitado. Si alguien te va a dar tu dinero, como que sea lo más fácil posible para que compren tu producto y me des tu dinero. No los hagas en el crear una cuenta. Pero mira aquí, 21% dijo el proceso de pago, los campos de formulario por demasiado tiempo, demasiado largo de un proceso. Complicado checkout. Entonces este es un número, esto es lo que se llama métrica cuantitativa. Es cuantitativo porque es un número con lo cualitativo ¿es por qué? Bueno, ¿por qué fue demasiado complicado? ¿ Entonces? Teníamos que ir a buscar y tomaríamos algunos de estos principios aquí que estábamos aprendiendo hace. Lana, ¿es un campo de forma de columna dual? Si es así, entonces qué va a experimentar en una sola columna. Puedes tener esto fuera. Voy a saltar a éste si aquí se trata de campos de forma mini como este. Ves todos estos campos de formulario a la derecha, como evitar esto, eso es demasiados campos de formulario. Si tienes tanta información, es mejor poner esto en un mago. El mago es genial para formas largas y tengo todo un video al final de la clase aquí donde acabo de hablar puramente solo de magos. En los magos son geniales porque da, rompe toda la información de forma larga en categorías de pequeño tamaño de bocado. Esto da una sensación del usuario, una sensación de ubicación como si estuvieras aquí. Has completado estas dos tareas, por lo que hay progreso y tiempo. Y también el progreso y el tiempo que solo te queda uno más. Se rompió todos estos campos de forma larga que tendríamos aquí a la derecha. Y lo puso en un proceso paso a paso. Nuevamente, la razón por la cual es que esto no parece desalentador frente a un Zoom Outlook a la derecha. Esa es una tarea desalentadora aquí para intentar completar donde esto desde la vanguardia no se ve tan desalentador. Y otro pequeño truco psicológico es si haces árbol realmente fácil y realmente fácil outro para el primer paso, es súper fácil. Y si es realmente fácil, la mayoría de las veces, estudios han demostrado que las personas son más propensas a completar estos pasos en el primero es realmente fácil, entonces el último debería ser súper fácil de escribir. No quieres que la gente se caiga. Ya han puesto en el trabajo y hacer que el último sea súper fácil. Y luego están terminados. Usa otro do y no uses errores útiles. En este caso, podemos ver que las contraseñas no coincidieron. Evita cosas como esta donde estas están presionando el botón Crear y solo dice que algo salió mal, por favor arregla y no sabes qué salió mal, ¿verdad? Por lo que cada uno de estos campos de formulario debe tener su propio error que se aplique a sí mismo. Explora entradas de registro, ¿verdad? No controlas cuánto tiempo son los nombres de las personas. En este punto, necesitamos saber si esta persona tenía un nombre largo. Tenemos dos opciones. ¿ Lo elipamos? Que es lo que me gusta hacer. Dale aquí estos pequeños tres puntos para indicar al usuario que hay más nombre. Y si el usuario quiere ver más nombre, pueden hacer click en esto y pueden flecha hacia adelante con la flecha y verán más del nombre allí. O podemos desglosar esto en dos líneas. Al igual que aquí. Qué, pero lo único con eso es, él , causa más, mueve el campo del foro y crea más ancho o altura aquí. Y como que arroja la asimetría de la consistencia visual de la altura de todos los campos de forma. Por eso solo soy más fanático de la elipse aquí. Pero solo ten en cuenta de ello. No tienes gente, algunas personas tienen nombres muy largos, apellidos realmente largos. No uses un campo de forma corto como este. Si sabes que va a ser una entrada larga. Si es un correo electrónico, dales un espacio lo suficientemente bueno, lo suficientemente bueno. Recuerda que éste ya habló de ello, pero agrupa juntas secciones relevantes. Entonces si tienes grupo uno, grupo dos, y grupo tres, versus como mantener el mismo espacio para todo. Solo usa el espacio. Es todo lo que necesitas hacer. Espacio, espacios. Espace en blanco es tu amigo. Validación en línea. Esto es genial. Entonces usa la validación en línea si puedes. Entonces si estoy escribiendo un correo electrónico y accidentalmente pongo una coma, me error en el punto de que pongo una coma, como una vez que lleguemos aquí, sólo direcciones inválidas. O si pongo un espacio extra aquí, me error en este punto, eso me está errorando en línea significado dentro del campo del foro mientras lo estoy escribiendo, para que de esa manera pueda arreglarlo antes de salir de este campo de formulario. Esto depende de tu base de datos. Esto no es como no hacer esto o que la gente no va a usar tu aplicación, pero es mejor tenerlas validación de mentira. Lo que pasa si no lo haces es que el usuario llene toda la información, presiona enviar, y luego cuando tenga que cazar como ¿Qué? Oh, ¿por qué no pasaron por algo fallido? Entonces entonces tenemos que mirar el punto culminante, el campo del foro aquí, y al volver a escribir el campo de formulario, haga clic en reescribir en él, arreglar el error donde se remonta a esa affordance. Como ya sabíamos que el usuario estaba aquí, sabíamos que era un error. ¿ Por qué dejar que se vayan? Al igual que hagamos que lo arreglen aquí. ¿ Por qué vamos a hacerle esto a nuestro usuario? Hablé de magos. Puede tener todo un video sobre los hechiceros aquí. Vamos a terminar con estos dos últimos hacer y no lo que no. Recuerda el tamaño apropiado. Tenemos que el código postal aquí. Hazlo del tamaño de un código postal, aunque te arroje tu asimetría visual. Porque de nuevo, la usabilidad siempre debe superar la visibilidad o visual. A pesar de que esto puede verse mejor. Peep la forma en que las personas usan la usabilidad de su producto siempre es mejor que la forma en que se ve algo. Hay algo que puede verse genial, pero no se acostumbra muy bien. Algo puede que ni siquiera se vea tan bien, pero la gente lo usa y se desempeñó muy bien. Frente al de la derecha aquí. Y luego nunca, nunca a tres campos de formulario de columna como este, por favor, por favor, no hagas esto. De nuevo, podrías hacer las dos columnas que acabo de poner estar al tanto, esto es un mal, Eso no es una cúpula. Hay veces que esto es, lo hemos hecho, pero simplemente no, en realidad no hagas tres columnas aquí. Sólo voy a terminar de nuevo con sólo unas piezas de alto nivel. Hablé mucho sobre el diseño de una sola columna. Nuevamente, una de las cosas de las que hablar también es autocompletar. Autocompletar. Genial. Entonces autocompletar es, muestro esto en el video donde hablamos foros de direcciones y formularios de búsqueda. Pero esencialmente lo que esto hace es mostrar información relevante basada en las entradas que el usuario ya ha realizado. Y se salta al usuario de escribir toda la palabra. Entonces si solo estás escribiendo mi nombre AIR, los autocompletes van a mostrar un desplegable abajo, y hablaremos de los desplegable en el siguiente video. Pero mostrará un pequeño desplegable rápido de lo que piensa que son partidos con AAR. Dice que puede tener árido y un par de otras cosas que coinciden con ese nombre. Lo que pasa aquí, Lo que es genial es como, digamos que escribí mi nombre y estaba llenando una dirección y un auto terminado Erin puede también auto poblar mi apellido, mi e-mail, mi dirección, mi ciudad, mi estado, y muchos casos la aplicación no proporcionará esto. Chrome como tu navegador de Internet hará esto por ti. Pero solo estar al tanto de la terminología. Eso es lo que es el autocompletar. Recuerda ese mago que mostramos, voy a, hablaré mucho de esto. Pero independientemente de los asistentes, siempre es genial pensar en tipo de experiencias de usuario, tener estos tres aspectos clave para ello, como establecer la expectativa, ubicación, como dejar tus noticias o usuario sabe dónde están en tu experiencia de usuario, tiempo y progreso, van a tener una tarea que completar como, ¿qué han hecho ya? ¿ Dónde están y cuánto tiempo les queda? Qué pasos en el futuro, lo que necesitan. Hablamos de solo queremos asegurarnos de que hablamos de la validación en línea opcional versus requerida dar errores útiles. Recuerdo sólo practicar. Sea explícito sobre cómo desea que la gente trate esos nombres largos en sus campos de formulario y adivina qué ingenieros van a querer notar. Van a preguntar como, de acuerdo, entonces, ¿cómo tratamos a un nombre largo? ¿ Vamos a dos líneas? ¿ Nos elipamos? Y preferentemente me gusta eliparse como te mostré antes. De acuerdo, Genial, eso son campos de formulario. Te veré en el siguiente video. Hablaremos de botones. 6. Botones: Muy bien, Bienvenido a la siguiente clase. Vamos a hablar de botones. Voy a saltarme la Teoría de Button y lo haré hacia el final porque creo que va a ser más relativo y fácil de conseguir una vez que pasemos por todo esto. Muy bien, así que empecemos con algunos tipos de botones entonces me meteré en combinaciones de botones en diferentes estados y mejores prácticas y hacer algunos no. Pero típicamente tenemos nuestro botón cuadrado. Puedes ver aquí, soy un buen botón, tiene al menos 50 pixeles de altura. Buenas áreas Tap, 50 por 50 pixeles. El ancho depende realmente del contexto del botón. Y así quieres un poco de espacio para respirar para tus textos. Voy, mostraré algunos do y no ejemplos de eso. Pero éste, tiene 140 píxeles de ancho. Probablemente puede ser un poco más corto si también lo quisieras. Pero buen espacio de respiración para la topografía dentro del botón. Y por lo menos mínimo 50 píxeles por alto. Tenemos un botón cuadrado que no tiene bordes redondeados. Y se puede ver el de la derecha tiene algunos bordes redondeados a él. Esto se llama botón de píldora. Es bastante autoexplicativo, parece una píldora que tomarías. Es totalmente redondeado, completo redondeado en los bordes. A éste se le llama botón fantasma. Y es sólo un botón fantasma porque tiene un contorno para que el color primario aquí sea el contorno del botón. Y el relleno es la mayoría de las veces blanco o cualquier color del fondo de este botón se sienta. Si todo fuera como una interfaz de usuario oscura, sería de un color más oscuro o si estuviera sobre un fondo blanco, sería blanco como está aquí. Pero esencialmente debería parecer Es sólo un esquema con el texto. Y estos son realmente geniales para los botones secundarios. Hablaré un poco de eso donde se puede ver estos a todo color son geniales para los botones primarios. Y este estilo fantasma es una gran combinación con el botón primario. Y estos son para acciones secundarias. Y hablaré un poco acciones secundarias aquí en un segundo. Contamos con botones de texto o enlaces. Estas son solo palabras sin ningún elemento gráfico al lado. Y si tocas en ellos o haces clic en ellos, lo harán, lo estarán, llevarán al usuario a un lugar. Bastante simple. Todos sabemos qué son los enlaces. O bien tener la textura de color, tienes una línea debajo. Esto tiene, la línea debajo es en realidad en algunos casos mejor solo por la accesibilidad. Si alguien es daltónico, tal vez no vea esto como un enlace. Pero si ven la línea debajo, entonces les indica que ese es el elemento vinculable. Los botones también pueden tener estados de carga en él. Entonces verás que éste es bastante común donde el usuario estará pagando por algo en un sitio y ellos harán clic en el botón de reproducción y en lugar de saltarlos otra pantalla o en otro estado, que es como cargar. Y si algo no pasó, correcto, lo equivocamos. Podemos mantenerlos en el mismo contexto y el botón se convierte en un estado de cargador. Mantiene eso. Da ese nivel de control y retroalimentación y presionas pagar, ves la retroalimentación que recibimos el pago. Solo espera un segundo, lo estamos procesando y luego te daremos un éxito. Al final de esto. Tenemos botones de icono de nuevo, son sólo textos y combos de íconos. Verás los populares como añadir a continuación, descarga. Y luego tienes botones de ícono. Sólo son botones sin los textos, y sólo sirven como elementos de acción. Sin tecnología, por lo general estos son iconos más comunes como las tarjetas de compra y forward o snacks y descarga y cierre y un anuncio. La mayoría de las veces no necesitan texto al lado de ellos porque son íconos comúnmente reconocidos. Y pueden ir dentro del botón como has visto aquí, o simplemente pueden ser iconos mismos. Tengo toda una charla al final, una de las últimas clases de las que hablaré solo de toda una inmersión profunda en iconos, iconografía, mejores prácticas ahí. Vamos a ver algunas combinaciones de botones. Me gusta mucho este combo aquí, que es botón secundario a la izquierda, que es el más claro en color. O me gusta el combo del botón fantasma para esas acciones secundarias y acciones secundarias o cosas como él cancelarán o ropas o en algunos casos tal vez eliminen. Entonces los botones primarios más oscuros en color. Y me gusta el lleno de aquí. Entonces fantasmas en el campo izquierdo, a la derecha. Y esas son tu acción primordial. Entonces esas son lo más importante que quieres que tu usuario haga en un determinado flujo de trabajo o una pantalla que debe estar en combinación o acompañada con el botón principal. Esas son cosas como Guardar y Enviar o siguiente. Puedes ver también puedes usar color para ayudar a indicar esos botones secundarios y primarios. Usted tiene. Un poco menos fuerte de color a la izquierda y un color mucho más fuerte visual a la derecha. Entonces tienes la píldora del botón fantasma cancelar la izquierda y la píldora a la derecha. Cosas bastante simples aquí. Normalmente me gusta usar el mismo ancho de estos botones lado a lado. Entonces si tira este botón de cancelación aquí abajo, es el mismo ancho que el botón Guardar, por lo que se apilan muy fácilmente. Se puede ver eso aquí. Se apilan, apilan muy bien contra algo como esto. Está bien tener tu, tu botón Cancelar, tal vez un poco más pequeño que tu botón primario solo visualmente, da algo más importante para ver o tono más fuerte a la acción primaria. Eso es genial cuando haces este tipo de alineación horizontal, pero cuando se apilan verticalmente así, arroja la alineación vertical. Y no es mala idea sólo que sea el mismo ancho como ese. Vuelve un poco aquí. ¿ De acuerdo? Botón énfasis, tipo de describir esto ya, pero alto énfasis para acciones Kotlin primarias, color más oscuro, énfasis medio, acciones secundarias, color más claro. Y bajo énfasis EF que significa que no hay acción desactivada botones que no tienen ninguna acción a ella aunque deberían ser muy bajos. El énfasis visual o la apariencia visual de un botón. Vamos a ver los estados de botones. Por lo que de nuevo, tenemos este estado por defecto. Aquí tienes un estado de flotación. Y como hablé en el video del foro, las mejores prácticas para el hover es usar un color más brillante. Esto ayuda a que el botón se vuelva más vivo. Es como, Hey, estoy vivo, haga clic en mí tipo de cosa. Pero recuerda cierne solo una acción que usamos en la web, no dispositivos móviles y tabletas deshabilitados, tiendo a usar 30% de opacidad para el fondo y luego 70% para el texto. Todavía quieres que la gente pueda leer los textos si está deshabilitado, solo quieres que se vea muy discapacitado. Aún deben saber que este es un botón de enviar, pero deberían verlo como algo que no parece enganchado o accionable. Muy bien, para que puedas usar sombras en botones. Te voy a mostrar muy rápido algunos botones aquí o algunas sombras aquí. Entonces si fuéramos a sumar una y tengo toda una charla sobre las sombras, pero déjame pasar rápidamente por una pequeña demo rápida sobre sombras aquí. Si fuéramos a añadir una sombra a este botón, una de las primeras cosas que no hacer o evitar como predeterminado, la sombra predeterminada que se obtiene nunca es la mejor, simplemente nunca empiece con el predeterminado. Se puede ver aquí tiene cuatro en la y, es decir, en la línea vertical debajo del botón. Para píxeles hacia abajo y hay 0 en la x Eso significa que no hay sombra apareciendo en el lado vertical de los botones. Así que de nuevo, y en la línea horizontal y x en la línea vertical. Al menos queremos hacer cinco a cada lado y cinco. Ahora la siguiente parte es que este botón son las sombras demasiado duras. Como si entrecerrabas los ojos, aún puedes ver ese botón. No queremos eso. Queremos aquí un botón muy sutil o una sombra aquí. Entonces vamos a seguir adelante y agregarle algún desenfoque . Eso ya está mejor. 20 desenfoque será bueno. Típicamente me gustó incluso independientemente del color de los botones, me gusta poner un poco de azul, solo un poco apretado de azul en la sombra de color de ese botón, ¿verdad? Entonces, independientemente del color es rosa o morado o lo que sea, un poco azulado de azul y el área negra o gris para la sombra siempre es mejor que solo negro puro. Ahí vas. Eso es todo. Danos un poco de profundidad. Se siente como si un botón se siente como algo en lo que puedes tocar. Incluso puedes ir y agregar un color. Puedes agregar el mismo color o color similar a la sombra para otro efecto también. Así que sigamos adelante. Vamos a cambiar esto en realidad. Hagámoslo, hagamos aquí un color azul. Genial. Ahora pasemos al color de la sombra. Cambiemos la sombra a un poco más azul. Eso te da un poco más de una mirada. Voy a acabar con el poco borroso. Probablemente voy a ir un poco más alto en la opacidad. Ahí vas. Muy sutil. Sutil es efectivo. No queremos que la sombra sea muy notable, solo debe dar un poco de profundidad. Se pueden ver estos tres aquí con la sombra. No hay profundidad en este botón. Y estas sombras ayudan con un poco de profundidad aquí. Solo una cosa a recordar es si haces este sistema de emparejamiento donde tienes el botón fantasma a la izquierda y un botón principal a la derecha. Y un usuario va a pasar el cursor sobre el botón Cancelar. Y sientes la cancelación con la naranja aquí, la misma naranja que se usa para el botón primario. Cuando miras este desplazamiento de datos, ambos tienen jerarquía visual igual. Están compitiendo unos contra otros justo en el estado de flotación. Es mejor evitar algo así y usar un flotador que aún esté quizá dentro del área naranja, pero un poco más claro de un tono de color naranja como este es mejor, ¿verdad? Entonces la primaria sigue parecida al botón primario, incluso en estado de flotación. Muy bien, al siguiente estado del botón se llama estado enfocado. Y esto es cuando un usuario Ms destacando este elemento de botón usando un métodos de entrada como una pestaña de teclado. Puede tabularse a través de campos de formulario y también puede tabularse al botón. Este no es el ratón pasando por el botón, pero me gusta usar el mismo estado que el hover donde es un color más brillante cuando se enseña la pestaña del teclado al botón. Entonces, si tiene tres campos de formulario y un botón de envío, el usuario puede tabularse en cada uno de esos campos de formulario, poner información en, y luego tabularse al botón también y presionar Entrar en el teclado como envío. Solo está mostrando que tipo de estado de enfoque también es importante. Nuevamente, siempre y cuando tengas el flotador definido, lo hará, será, este será el mismo estado para eso. Hay un estado presionado. Esto es cuando el usuario ha presionado el botón. Nuevamente, puedes usar un color más claro que el que estaba en el estado de flotación o enfocado. También puedes hacer una animación donde tengas este valor predeterminado, tienes este hover, ellos lo presionan, y obtienes esta pequeña animación que sucede bastante rápido, pero va de presionado 123. Y es realmente sutil, pero le da esa retroalimentación al usuario que haga clic en el botón o toque el botón. Vamos a meternos en algunas cosas y no. Los botones deben tener una o dos palabras, tres palabras Max. Más de tres palabras, no es fácil escanear y ver cuál la acción principal o qué hace el botón, ¿verdad? Debería ser realmente fácil simplemente mirar el botón. Botón va a informar al usuario lo que hace. Y aquí hay que leer dentro de este botón, esto es demasiado largo, demasiado texto. Si estás usando iconos de botón usa alineación horizontal y evita alineación vertical con los textos y los iconos aquí solo crea forma desequilibrada y no es un botón común aquí. Así que sólo evítelo. No hay razón para no hacer algo como esto a la izquierda. Dar un buen espaciado. Para que puedan ver aquí hemos dado el espaciado igual desde la parte superior e igual espaciado hacia la derecha. Y tienes un buen botón como este frente al de la derecha aquí. Tenemos buen espaciado en la parte superior. Bueno, ni siquiera tenemos espaciado a izquierda y derecha, así que necesitamos hacer esto un poco más espaciado. También da buen espacio para respirar desde el texto. Puedes hacer el espaciado igual o puedes agregar más espacio desde la izquierda y la derecha. Esto es útil porque tienes un target tap, el inmueble que toma este botón, qué tan grande es, eso va a informar lo fácil que es tocar o hacer clic, ¿ verdad? Entonces no hay problema. No debería haber un problema con hacer más grande el botón, sobre todo si es el botón principal. Para que sea fácil, tocar y regresar, obtienes mejor espacio para respirar desde el texto en tu botón frente a los de la derecha aquí. Al igual que todos estos botones se sienten apretados. Al igual que los campos de texto muy apretados aquí como no puedo, tengo que mantenerlo así para poder mostrarte el ejemplo, pero de verdad me habría acercado y justo, eso es mucho mejor. Ayer Debería bonito botón ahora, se puede ver que es realmente difícil para mí nazi incluso dejar estos botones como este. Así que de nuevo, vuelve a tocar y hacer clic en el espacio como este debería ser fácil de hacer clic y tocar. Entonces éste necesita más vertical así luce bien. Si estás usando un icono de botón, usa un icono a la vez. No uses más de uno. Se mezcla el estilo de comunicación. Se puede ver que éste es como lo que es esto una descarga o NADH. No lo sé. Usa un color más brillante para pasar el cursor. Entonces también he visto esto una vez. No hagas que el texto sea más grande en un hover. Usa el color como indicador de desplazamiento, no, no texto y tamaño. Si tienes un enlace secundario como éste donde se cancela, encaja muy bien debajo del botón Guardar. No lo pongas en la parte superior porque la gente la mayoría de las veces dejaremos su lectura abajo así. Queremos que el botón principal sea lo primero que alguien escanea y no necesariamente el botón de cancelar porque cancela secundaria. El mismo trato aquí a la izquierda. También puedes apilar ellos. La mayoría de las veces estamos haciendo botones primarios a la derecha y botones secundarios a la izquierda. Puedes cambiar ese orden cuando tengas algo que podría ser accidental. Si lo tienes, voy a apretar. Así que voy a disparar a otra clase. Hablaré de aquí. Este de aquí. Si tienes algo donde alguien va a eliminar algo y un delete, siempre podemos hacer un RU seguro, modal móvil aquí y tenemos un delete y un cancel. En ocasiones aparecerán estos modales y el usuario accidentalmente pincha en la posición principal aquí mismoy accidentalmente eliminará pincha en la posición principal aquí mismo esto. Y esta es una eliminación impactante porque están eliminando una cuenta y estamos como, Hey, ¿estás seguro de que quieres eliminar esta cuenta? Al igual que has hecho mucho trabajo en esta cuenta, vas a perder todo, cierto, así que la primera eliminación que hicieron, disparamos este modal y solo les damos una oportunidad más de decir, ¿ Estás seguro de que quieres hacer esto? Puedes cambiar el orden de estos botones, para que eso no suceda. Puedes poner este por aquí y puedes poner el cancel uno a la derecha, así y cambiar ese orden acaso accidentalmente vuelvan a presionar la cancelación. No es la acción primaria impactante. Esta es una estrategia para, para especie de usar esa combinación aquí para ayudar justo ese caso accidental donde accidentalmente presione Cancelar de nuevo, pero te gustaría que todo lo agradezcas. Hicieron eso. No quise presionar Eliminar donde este realmente tienes que ir. Oh, de verdad quiero eliminar esta relación. Eso es más o menos todo lo que describía aquí. En éste. Aquí estaba puedes cambiar esto un poco. Sólo por esas supresiones muy impactantes que suceden en esas. Cualquier cosa que pueda ser accidental que quieras simplemente asegurarte de que tu usuario no haga esto. Cuando uses un botón en el fondo de una foto como esta, usa tu botón de color de campo como el principal. Y la mayoría de las veces no uses aquí el botón fantasma porque va a impactar la legibilidad del texto donde el de la izquierda aquí destaca mucho más. Cuando se trata de enlaces. Usa la cantidad correcta de palabras para mostrar tus enlaces. Por lo que se ve el de la izquierda. Si acabamos de poner click aquí para ver tus pautas de usuario de CR, el click aquí, los textos azules. Y así todo lo demás es fácil de leer. Tiene buena legibilidad a ella. Y también estamos transmitiendo al usuario que estamos usando intencionalmente azul aquí porque queremos que se involucre con este enlace. Incluso puedes ir un paso más allá y añadir una línea aquí si también lo quisieras. Así como eso. Frente a la derecha, como hacer todo azul, realmente quiero que mis usuarios usen esto. No pueden, en primer lugar, afecta a la legibilidad y legibilidad. Y tal vez no sepan que todo esto se puede hacer clic. Pueden pensar que es parte de tu marca y solo estás usando textos azules para todo. Sé inteligente con tus enlaces, sobre todo si atan dos frases como esta. Usa una línea de texto para tus botones. Nunca hagas esto, donde va a dos líneas. Simplemente arroja la simetría del botón y se ve súper raro. Nuevamente, si no tiene dos líneas, tienes demasiadas palabras. Tenemos que algo tiene que dar tus palabras como botón con algo bonito que dar ahí, pero nunca debería estar en dos líneas. Nuevamente, mantén los botones al mismo ancho cuando los apiles, y luego no mezcle el ancho como este cuando lo apiles. Está bien, creo que eso es todo. Pasemos rápidamente por el color de la teoría de los botones y terminaremos. Una de las cosas que solo quiero llamarlo, oirás que este acrónimo se arroje por ahí. Se llama llamada a la acción. El llamado a la acción puede referirse a dos cosas que pueden referirse al texto en una pantalla en particular, que es como lo más importante que desea un usuario vea en pantalla, o se refiere al botón, el botón de llamada a la acción, que es ese botón principal. Entonces de nuevo tienes secundaria a acción, que es ese botón secundario. Cosas como volver y cerrar, cancelar, cosas así. Recuerde que el botón de tamaño debe sentirse fácil de hacer clic, fácil de tocar las directrices de la interfaz de usuario de Apple. Dicen, cualquier cosa ahí dentro, los dispositivos de Apple o las aplicaciones de Apple Store, cualquier cosa que se pueda tocar o debe ser de 40 píxeles por 40 píxeles. Personalmente creo que eso es demasiado pequeño. Tiendo a hacer al menos 50 píxeles por 50 píxeles como el más pequeño. Nuevamente, recuerda que el color de fondo debe tener un buen contraste y debe destacarse de otros componentes de la interfaz de usuario si es el botón principal, ¿verdad? Por lo que el botón principal debe ser una de las cosas más parecidas, más oscuras en la aplicación. Por lo que es realmente fácil saberlo. Puede mostrarte un ejemplo de eso, de lo que es lo que necesitas hacer, ¿verdad? Entonces si miras esta página aquí, entrecerrar los ojos y mirarla, esta naranja aparece, ¿verdad? Entonces es lo principal que queremos que haga el usuario. Entonces estamos usando la jerarquía visual para transmitir eso también. Además, puedes usar ese color de nuevo para hacer un diferenciador clave entre el botón primario y el botón secundario. Ya hablaba de formas. Así que solo formas prácticamente horizontales de píldora. La colocación también es crucial, ¿verdad? Entonces no importa cuál sea tu color de tu botón o el tamaño de tu botón. Si no está en un lugar donde las personas tus usuarios no pueden verlo o escanearlo fácilmente, entonces no es tan efectivo. Por lo que la colocación de nuevo de estos botones, dependen de tu contexto, pero normalmente en la parte superior o inferior de tus pantallas funcionan mejor. Por otra parte, la copia debe ser corta y dulce, fácil de leer, fácil de escanear. Y si no sabes qué es miembro el botón de copiadora, debe informar lo que va a hacer el botón. Está bien, genial. Eso fueron botones. veré en el siguiente. Nos vemos a todos en el siguiente video. Cubriremos los desplegables. 7. Descenso: Muy bien, hablemos un poco sobre los desplegables. desplegables son elementos más o menos formados. La única diferencia es que se utilizan para la selección. Por lo que tienen algo que al hacer clic en el campo de formulario aquí, ese menú aparece un poco lo que lo llamamos el menú desplegable aquí. Eso tiene variables de selección para el usuario. Son geniales para cualquier cosa que tenga tres o más elementos o variables para que un usuario seleccione. Porque puedes poner un montón de estos artículos. Se puede poner, digamos, 15 de estas selecciones dentro de la pequeña ventana. Y ahorra una tonelada de pantalla de bienes raíces, bienes raíces en lugar de simplemente mostrar las 20 de esas selecciones. Pero si solo lo tienes, di como de dos a tres variables o elementos de selección para un usuario, entonces es mejor solo usar un botón de radio o una casilla de verificación. Y yo, te mostraré los en video aquí. Creo que no el siguiente video, sino el video después nos sumergiremos en botones de radio y casillas de verificación. El criterio para un desplegable es, nuevo, usaremos los mismos estilos para nuestros campos de formulario. Verás el campo del formulario de esquema aquí. Entonces la forma de interfaz de usuario material que acaba de tener la línea. Las únicas distinciones de un campo de formulario y un desplegable es la pequeña zanahoria, esta pequeña flecha azul aquí. Cuando se hace clic en eso, eso abre el menú desplegable. Y lo que es un requisito para el desplegable es que el usuario solo puede seleccionar un elemento, y luego esa selección se convierte en la entrada aquí donde está el texto fantasma. Si tienes más de, digamos, 20 ítems en un menú desplegable, también lo mejor es hacer un tipo de cabeza o autocompletar, que te mostraré un ejemplo aquí en un segundo. Los desplegables son geniales no solo para formularios, sino que también podrías usarlos como menús. Y así los verás mucho en sitios de comercio electrónico. verás en el sistema operativo de tu computadora como Mac. El área de la ventana superior tiene menús desplegables aquí. Verás un montón de desplegables para menús que se ven algo así. Aquí está nuestro sitio de Bobo t en nuestros artículos para el hogar. Y entonces la arquitectura de nivel aparente son los artículos para el hogar. Y la información a nivel infantil basada en artículos para el hogar es almohadas e impresiones de arte y relojes y lo que tienes. Entonces. También verás desplegables en forma de menús llamados mega menús, donde estos son grandes sitios de comercio electrónico y tienen múltiples arquitectura de información donde tienen un nivel padre como artículos para el hogar y tienen un nivel de niño como almohadas, y luego tienen un montón de nietos nivelar una almohada opciones aquí. Voy a conseguir toda esta información y menús y un video creo que hacia el final de la clase hablé de menús y cajones, y nos sumergiremos profundamente en este tema. Vamos a ver algunos estilos desplegables típicos aquí. Entonces tenemos el estilo predeterminado. Nuevamente, tenemos ese flotador donde el contorno se vuelve azul. Tenemos la ventana de diálogo o el desplegable real que contiene los menús. Y también tenga en cuenta que dentro de este menú desplegable, también tiene el hover aquí. Esto seguirá a tu ratón. Nuevamente, pase el cursor por escritorio pero no para dispositivos móviles o tabletas, entonces tienes el estado activo. Por lo que este sería el valor seleccionado aquí. Entonces si un usuario seleccionó algo, entonces usted tiene el estado de error. Tan similar a nuestros campos de formulario y mensaje de error y un esquema para rojo para indicar el error. Y luego otra vez, tienes ese estado discapacitado, por lo que el 30% superan la transparencia o, o un gris muy claro. O incluso puedes hacer ambas cosas para transmitir que este desplegable es para establo. Vamos a ver algunos tipos desplegables y casos de uso. Son geniales para cualquier cosa que tenga valor de rango. Más bien estás diciendo como, ¿cuánta metraje cuadrado es tu casa o cuánto dinero ganas un mes? Y puedes volver a usar los textos fantasma para ayudar a dar un poco del objetivo de comunicación o el prompt como el ejemplo 500 a 100. Cuando el usuario hace clic en esto, ven todos los rangos que pueden seleccionar aquí. Esto es mejor que solo una entrada recta de como mezclé 2300 al mes. En realidad podrías ser 335 dólares al mes. A veces es mejor en esos valores solo dar un rango. Y hace que sea más fácil para el usuario simplemente seleccionar un rango y no es tan intrusivo. Especialmente cuando piensas en cuánto ganas un mes frente a un número exacto frente a un rango. Y lo mismo para el metraje cuadrado aquí. Al igual que tal vez no sepas realmente tu metraje cuadrado exacto, pero sabrás una estimación aproximada del metraje cuadrado de tu casa. Por lo que el rango y los desplegables son buenos para ir juntos. Para que puedas combinar los menús desplegables con campos de formulario. Por lo que aquí se puede ver tenemos nuestro valor de número de teléfono. Digamos esto como un producto internacional, puedes usar el menú desplegable aquí para seleccionar el tipo de número de teléfono que vas a ingresar. Y luego el formato de cuatro números aquí y los textos fantasma cambiarán en base la selección del país que has seleccionado. Otro grande es que de nuevo, si tienes más de 20 ítems, cuando el usuario haga clic aquí en el formulario, verán el desplegable, pero también verán el estado de escritura de entrada. Y a medida que el usuario lo tipifica filtra la lista a continuación. Por lo que verás esto muy común para las selecciones de estados. Y para que a medida que escribas, MA, verás la lista desplegable de elementos filtran en base a ese tipo. Y luego otra vez, podrías ir aquí y hacer click en Maryland, o podrías teclados con flecha hacia abajo en tu teclado e ir y hacer y seleccionar este elemento. Por lo que el estado de hover no solo funciona para flotar el mouse, también funciona si usted fuera un teclado de flecha hacia abajo en su teclado aquí también. Se pasa por alto un atributo importante a ese tipo de. A veces es el estado de hover para este desplegable aquí cuando estás diseñando esto, puedes combinar estos desplegables con casillas de verificación. Entonces digamos que querías algo que tuviera más de un tipo de selección. El menú desplegable predeterminado es solo un criterio de selección seleccionado. Pero en este caso, puedes combinarlo con los desplegables para informar a una selección múltiple. Entonces en este caso, estamos mirando todos los sabores de helado. Ten aquí las casillas de verificación. Y si un usuario hace clic en las casillas de verificación y cierra el menú desplegable haciendo clic fuera de la ventana desplegable. Por lo que en cualquier momento que aparezca ese desplegable, haces clic fuera de él y se cerrará. Y puedes ver aquí las selecciones que se basan en el desplegable multi-select que entra. Y si hace clic en la X aquí, desseleccionaría vainilla dentro del menú desplegable, y también eliminaría este valor aquí. Esto saldría encima y galletas y crema, que se deslizan hasta aquí así. Impresionante en ello. Otra forma en la que podrías usar el mismo desplegable es haciendo un icono de filtro. Por lo que se puede ver donde el desplegable tiene el portador o la flecha para indicar el desplegable. Y luego para el filtrado, usamos un ícono de filtro. Y si abres este ícono de filtro hacia arriba, puedes ver que estás seleccionando tipos de alimentos. Esto sería bueno para como un pedido de servicio de entrega en línea. Y en este caso tenemos comida china, italiana e india siendo filtrada. Y por lo general tendrás el ícono de filtro y en azul o un color para indicar que este campo de formulario se está filtrando. Si no se estaba filtrando, lo que significa que tenías todo el tipo de alimento seleccionado. Podría verse algo así, que es el selecto estos. Apenas el color gris aquí, lo mismo que el color del trazo. Ese sería el estado por defecto. Y si está filtrando la lista, se vuelve azul para indicar al usuario que la información a continuación está siendo filtrada por los tipos de alimentos. Nuevamente, puede usar el desplazamiento dentro del menú desplegable y desplazarse con el ratón para ver las otras selecciones que están debajo del pliegue. Debajo del pliegue significa que estas son las selecciones que no puedo ver debajo de la ventana de diálogo o de la ventana desplegable. Una gran cosa que verás aquí con bastante frecuencia. Y quizá no te hayas dado cuenta es que un menú desplegable móvil, un desplegable en tu dispositivo móvil es un poco diferente de un desplegable en lo que acabamos de ver para web. desplegable móvil utiliza el inmueble completo, el ancho total del teléfono, y hace que sea fácil tocar para seleccionar los elementos aquí y también desplazar los elementos que se encuentran dentro del artículos que están dentro de este desplegable, ¿verdad? Entonces lo que quieres evitar es usar un desplegable móvil de formato web como este porque utiliza menos espacio y puede hacer que sea difícil tocar y deslizar esta zona para ver el resto de la artículos desplegables. Y no utiliza el espacio completo para tap inmobiliaria también. En un dispositivo móvil, tu punto de tap amistoso y amigable. Y lo más fácil de llegar es donde esta cajas grises, Esa es la idea detrás de un desplegable móvil es utilizar el inmueble completo del teléfono, el ancho completo. También facilita al usuario deslizar hacia arriba y hacia abajo dentro de esta selección desplegable. Se ve algo así. Tengo una abierta aquí. Todo lo que tienes que hacer es hacer click en regular dulce I o tocar en hielo dulce regular aquí. Eres nivel de dulzura se mostrará y si hubiera más campos, simplemente pinchaste y arrastra nuestro deslizamiento. Y mostraría diferentes valores de nivel de dulzura aquí. Y si seleccionas dulce regular o semi dulce aquí, se va a cerrar el desplegable. Te tapioca grande si quieres. No quiero hacerte hambre de Ababa t Pero sí, ese es esencialmente el desplegable móvil ahí. Por lo que de nuevo, los menús desplegables evitar estilo web en dispositivos móviles, puedes hacer estos para tablet. Pero como nuestra inmobiliaria es tan pequeña en nuestros dispositivos móviles, es un deslizamiento hacia arriba desde abajo. Y luego cuando toca tu selección, se desliza hacia abajo. Vamos a meternos más en algunos hacer y no. Nuevamente, un desplegable es genial para tres o más valores. Otra cosa es para el formulario de fecha rellenado, es mejor que el usuario simplemente ingrese la fecha aquí. Mes, mes, día, día, año, año, año. Entonces versus hacer los desplegables por meses, días y años separados de nuevo, porque esto es un affordance, va a tomar al usuario ya sea tres pestañas o tres clics para entrar aquí y introducir esta información y luego encontrar la fecha. Digamos que estás mirando tu cumpleaños o algo por el estilo, para desplazarte hacia abajo y encontrar la fecha en la que estás en contra de solo enganchar una vez, números de un teclado con un solo clic, entrada y poder introducir los números basados en ese teclado. Son geniales para la forma combinada llena de un selector de fecha. Entonces lo que es esto es que tengo una charla justo en los recolectores de fechas en el siguiente creo que el siguiente video hablaremos todo sobre los recolectores de citas aquí. Pero esencialmente puedes entrar, puedes escribir la fecha aquí, o puedes hacer clic en el icono del calendario, que luego mostrará el selector de fecha. Y puedes ir el día de hoy como predeterminado o puedes avanzar en el tiempo o retroceder en el tiempo basado en el contexto de esto, si es como programar una cita, entonces solo estás va a estar haciendo adelante en el tiempo. Si se trata más de una referencia de fecha de hora pasada, como quieres que mire analítica o algo que sucedió ayer en tu sitio web, entonces puedes hacer clic de nuevo en los días y no irás. No podrás ir a futuro estado aquí también. Pero me meto en todo eso en el video selector de fechas aquí en un segundo. De acuerdo, entonces si tienes menos de tres valores, es mejor exponerlos como botones de radio o casilla de verificación porque de nuevo, vuelve a affordance es menos clics y expone la información en el nivel de la cara y no dentro del desplegable. Así que evita si la pregunta es que tienes más de 21 años, usa los botones de radio sí o no versus ¿Tienes más de 21 años? Haz click, y luego ahora tienes que ir a hacer otro click. No. Por lo que es un clic más. Mejor hacer una versión como esta con los botones de radio. Desplegable. El ancho debe ser mínimo como mínimo. Entonces la ventana aquí, esta cosa, este ancho tiene que ser al menos la longitud del formulario desplegable rellenado. No haga que el campo de formulario aquí menos ancho que el real o el cuadro de diálogo desplegable. No hagas eso menos ancho en el campo de formulario aquí. Está bien si repasan como si pudieran ir un poco más anchos que el desplegable real en sí. Simplemente no lo hagas menos ancho aquí a la derecha. Puedes hacer cualquiera como este campo de formulario puede vivir por encima de este desplegable aquí. Al igual que cuando haces clic en él, no puede ir por encima del valor. O puede ver que puede hacer lo que está haciendo aquí, que es que se desliza debajo del campo de formulario, ya sea uno o totalmente bien. Para que pueda ver el ejemplo aquí como si haga clic aquí y el cuadro de diálogo del campo de formulario aquí. Se va encima de este favorito para el desplegable de color. tanto que aquí va justo abajo. Aquí no hay bien ni mal. Dicho ambos son aceptables. Recuerda dar un buen espaciado entre la flecha aquí y el texto. Y siempre usa el ancho que determina el ancho de tu desplegable basado en la palabra más larga que tengas dentro del área desplegable. Eso será que determinará el ancho cuando sea seleccionado. Entonces si tienes una larga palabra aquí, asegúrate de que esto cubra la larga palabra aquí. Y si va más largo que eso, déjame escribir esto en muy rápido. Genial. Entonces si va más largo que el desplegable, lo que puedes hacer es que tengas opción. Puedes ir a dos líneas, que típicamente no me gusta hacer. O de nuevo, podrías hacer lo que hemos hecho en el pasado, que es elipse off. Bien, solo ve tres más así. Pero digamos que tu palabra es justo donde está. Digamos que solo tienes la palabra más larga en ese desplegable es aquí donde solo tienes una palabra en la segunda línea. Es mejor solo agregar un poco más de ancho a tu desplegable. Saca eso que está demasiado apretado aquí. Agrega esto un poco más. Ahí vas. Ese debería ser un buen ancho para la palabra más larga dentro de su menú desplegable. Entonces esto sería como el sabor de helado más largo del mundo aquí. Voy a deshacer eso. Así que de nuevo, solo da un espaciado bueno, adecuado aquí para estos desplegables. No aprietes la flecha ni los textos dan espacio para que estas cosas respiren. Nuevamente, elipse las palabras largas aquí, y no vayas a dos líneas. Creo que sólo se ve raro al arrojar la alineación asimétrica también. Nuevamente, dar un buen espaciamiento entre los textos y los campos de formulario. No apaguen estos así, ¿verdad? Esto debería ir, darle algo de espacio para respirar. Bueno demasiado apretado aquí asfixiando esta cosa debería poder respirar un poco. Como siempre, usa la cantidad correcta de longitud para que el cuadro de lista de diálogo se desplace, ¿verdad? Por lo que todo este contenido dentro aquí debería poder desplazarse. No hagas que el cuadro de lista sea tan grande como este que muestre todos los elementos porque eso no cabrá en tu dispositivo o en tu escritorio. Y vas a estar desplazando todo el asunto para bajar. De todos modos, si tienes una lista tan larga, es mejor hacer un tipo de cabeza. De todos modos, solo muestra aquí la lista si el usuario quiere desplazarse hacia abajo y encontrarla genial. Pero también pueden escribir en el teclado y filtrar rápidamente esa lista y luego encontrar el valor de la variable o la selección de entrada que están buscando. Muy bien, eso fueron desplegables. Y en el siguiente video aquí vamos a cubrir recolectores de citas. Te veré ahí. Adiós. 8. Seleccionadores de fechas: Muy bien, hablemos de los recolectores de citas. Un selectador de fechas es más o menos un desplegable para las fechas. Y permite a un usuario seleccionar fechas interactuando con una superposición de calendario. Y en su mayoría hay dos tipos comunes de funciones de selección de fecha. El primero aquí se utiliza para seleccionar una fecha específica. El otro más común es seleccionar el intervalo de fechas. Empecemos con el primero aquí. Si se utiliza para seleccionar un día específico, es comúnmente utilizado para la programación. Si fueras a concertar una cita, digamos en el Genius Bar, Apple Genius Bar, o en un vuelo de ida. O no creaste una cita para tu Diego vea a tu dentista para que te limpien los dientes. Y lo que pasa aquí es, funciona igual que un desplegable y haces clic en el campo del formulario mismo. El desplegable de superposición de calendario muestra que tienes un pequeño cuadro gris que indica el día en que estás y luego tocas en cualquier parte y verás aparecer la estancia activa no solo donde estaban los textos fantasmas, verás el texto completado activo. Y también verás una representación de esa selección en la superposición del calendario también. Entonces se complica un poco más cuándo usar para seleccionar un rango de fechas, y de nuevo, comúnmente utilizado para vuelos de ida y vuelta o estancias en hoteles. Ejemplos que puedes encontrar esto como en Google Vuelos o Travelocity. Y lo que sucede aquí es si ambas fechas de check-in y fechas de salida o salida y llegada. Fecha de llegada o salida. Estos aparecen como una superposición de calendario igual, pero dos tipos diferentes de campos de fecha. Y lo que sucede aquí es cuando haces clic y dices fecha de check-in, tu primera selección hace que la primera fecha. Y luego en la misma superposición de calendario, puedes ir adelante meses o meses atrás. Y la segunda selección hace que el intervalo de fechas. Y presionas hecho o puedes hacer clic fuera de la ventana desplegable y cerrarla. Y la primera selección ingresará el valor para el primer selectador de fecha. Y la segunda selección aquí, ingresaremos el valor para el segundo selectador de fecha. Así que vamos a ver a los estados para un recogedor de citas aquí. Nuevamente, tienes los dos tipos de estilos más comunes. Tienes esa interfaz de usuario material para eso solo tiene la línea. Y luego tienes el formulario de contorno aquí estamos turnos y contorno rectángulo. Nuevamente, el estado de flotar, volviendo al principio donde algo ilumina o se siente como si estuviera vivo. Vamos a usar el azul para el contorno o para la interfaz de usuario material caído, selector de fecha, regla desplegable, usar la línea para, la línea se volverá azul. Y luego volvemos a tener el estado activo, ese es sólo el estado de entrada. El error se queda aquí. Y un estado discapacitado como el 20% de transparencia dentro del selgador de diálogo calendario. Esto es bastante complicado en sí mismo, solo la caja aquí porque tiene mucho que pasar. Puedes retroceder un mes, podrías ir adelante un mes. Como dije antes, tienes la caja del rectángulo gris alrededor de los datos. Es hoy. Tiene la indicación azul, que es la fecha seleccionada o actuada. Y entonces también tienes un estado de hover que pasaría por ahí y seguiría a tu ratón aquí. Por lo que hay mucho que ir dentro del cuadro de diálogo. También puedes usar estos y otra vez, puedes combinarlos con un campo de fecha. Si tienes una selección de fecha, el usuario puede entrar y escribir igual que lo haríamos el campo de fecha en los campos de formulario que vimos antes, solo abren un tipo de teclado en los números, harán las barras ellos y luego completarán eso. O pueden hacer clic en el ícono Menú, que luego abriría el desplegable selector de fecha o ventana de diálogo donde podrían seleccionar, hacer la selección para la fecha. También puedes conseguir bastante astucia con tu cuadro de diálogo de fecha o selección desplegable. Y puedes hacerlo un poco más fácil para seleccionar años en el pasado y puedes sumar meses. Y de nuevo, esto ayudaría con el affordance le da un poco más fácil para el usuario volver años atrás, entrar en diferentes meses aquí, y luego hacer las selecciones aquí también. Cuando lleguemos a los recolectores de fecha móviles , te recomiendo que, y es la mejor práctica tomar el inmueble de pantalla completa. Y te mostraré algunos ejemplos que construimos para una aplicación en la que estoy trabajando. Esto es genial para. Nuevamente, toque inmobiliario en utiliza los inmuebles de pantalla completa que tenemos, el precioso. Pantalla inmobiliaria que tenemos en dispositivos móviles. Y hace que sea realmente fácil deslizar dos años diferentes también. Te mostraré un ejemplo aquí en un segundo. Nuevamente, deja muy claro el uso de la, si esto toma la pantalla completa inmobiliaria, puedes utilizar estas barras aquí es para en ella para indicar que el intervalo de fechas en que has seleccionado para un individuo fecha también. Y de nuevo, es un inmueble más tappable, fácil de deslizar hacia arriba y hacia abajo y ver los meses futuros. Podrías verlo o meses pasados lo puedes ver en ejemplos de Google Flight. Si vas a ver Google Vuelos en tu teléfono. Y luego aquí está el selgador de fechas que, usamos para una aplicación en la que estoy trabajando. Esto es para una aplicación solar, y esencialmente tienes el selgador de fechas aquí. Puedes retroceder en el tiempo y puedes analizar tu sistema. Y si haces clic en este martes o toca este martes, volverás a ver la fecha deslizar. Puedes volver. En este punto, mira lo fácil que es deslizar los últimos meses diferentes. Está bien, para que pueda ir fácilmente al pasado. Digamos que quería ir a ver el 23 de septiembre aquí, puedo dar click en el 23, pulse Done. Y eso cambiaría mi selección aquí. Mucho más fácil que ir y venir en estas flechas, como una forma rápida de entrar ahí y seleccionar una fecha. Y luego te mostraré aquí el campo de fecha personalizado. Entonces mismo principio aquí. Presionamos la costumbre, las diapositivas en y tienes las fechas de inicio y finalización. Nuevamente, realmente fácil para el en un dispositivo móvil deslizar estos diferentes meses. Digamos que quería hacer aquí el 29 de septiembre, todo el camino hasta el 13. Y se pudo ver la indicación de las barras naranjas para transmitir al usuario el rango de fechas. Y si presionas Hecho, aquí tendremos el rango. Y el usuario puede volver a entrar, agregar diferentes fechas que necesite. Eso es mejor practicar para los recolectores de citas en la web, puedes usar cosas así como esto se ve muy bien. Y luego podrías usar este tipo de interacción para los recolectores de fecha móviles también. Entrémonos en algunos do y no utilicemos un campo de formulario de fecha para cumpleaños. Así que de nuevo, si estás haciendo una fecha de nacimiento, usa el formato como este donde te mostramos MM, DD, YY. Nunca use un selechador de fecha para un campo de formulario de fecha de nacimiento. Esto se mostrará cuando haga clic en esto, cuando el usuario haga clic en el campo del formulario selector de fecha, el menú desplegable va a la fecha predeterminada de hoy. Así que si te imaginas, nacido en 1979, llegué a volver y aprovechar hasta 1979 en estos meses. Como nadie va a querer hacer eso donde en un campo de formulario aquí puedo simplemente escribir fácilmente el formato ba, ba, ba, ba, ba, ba, ba, done. Recuerda para dispositivos móviles, dale suficiente espacio para tu calendario y también recuerda darle un buen espacio de Tap. Si recuerdas en el video pasado, hablé de que las pautas de la interfaz de usuario de Apple son al menos 40 pixeles por 40 pixeles para cualquier tipo de tap inmobiliaria en tu dispositivo móvil. Puedes ver aquí si hicimos el calendario realmente pequeño, va a ser muy difícil tocar un valor específico, sobre todo si tienes pulgares o dedos grandes. Así que aquí hay 50 por 50 pixeles. Se puede ver que eso es, eso no es, eso no es lo suficientemente bueno. Va a hacer que alguien realmente difícil seleccionar solo uno de estos valores donde aquí, cada una de estas letras son estos números aquí está precisamente espaciado a 50 por 50 píxeles. Para que sigamos ese principio. Muy bien, así que eso fue en forma de fecha, recolectores de fecha. Y te veré en el siguiente video donde cubriremos botones de radio, casillas de verificación, casillas de verificación, y alternaremos patrones y componentes de la interfaz de usuario. Nos vemos ahí. 9. Botones de radio, cajas de verificación, Toggles: Muy bien, en este video vamos a hablar botones de radio, casillas de verificación, y alterna. Para botones de radio. Se usan cuando hay una lista de dos o más opciones. Su función permite al usuario seleccionar exactamente una opción. Eso es todo lo que obtienes. Una opción con los botones de radio. Y si está haciendo clic en un botón de radio no seleccionado, deseleccionará el otro botón de radio que se seleccionó. Por lo que es sólo una función de elección. El origen aquí es un botón de radio fue realmente modelado después de estos botones de radio físicos que estaban en autos viejos. Y lo que pasa es que tendrías estas estaciones predefinidas favoritas que harías, el usuario seleccionaría. Si haces clic aquí en esta selección de soy, entonces el auto volvería a reproducir esa emisora de radio definida preseleccionada que tenías. Y si haces clic en la otra estación AM, la que estaba justo ahí volvería a salir, y ésta volvería a aparecer en tocar la otra emisora favorita que tendrías. Entonces fue una funcionalidad similar de botones de radio, lo que significa que es solo una selección a la vez. Y en lugar de salir y estallar, mundo de hoy, se ven más así. Hay círculos para un estado predeterminado, y luego está para el estado activo, obtendrás los dos círculos aquí y los círculos internos se llenan, siempre llenos así. Puedes personalizar estos. Te mostraré cómo personalizar estos aquí en un segundo. Pero en la mayoría de los casos, suele haber ya un botón de radio predefinido todavía en el estado activo seleccionado. Incluso si llegaste a una pregunta de botón de radio como esta, dije, ¿eres mayor de 21 años y presionas sí. Ahora no hay forma de anular la selección de esto. No se puede simplemente anular la selección de este estado, es decir, volver a este estado. Una vez seleccionada una, se mantiene seleccionada y ahora hay que elegir es una u otra, ya sea sí o no. Esas son las funciones primarias del viento y por qué debes usar un botón de radio, especialmente sobre una casilla de verificación. casilla de verificación te da múltiples selecciones. Fueron un botón de radio es sólo un criterio de selección o función. Puedes ver aquí algunos casos de uso aquí es si fueras a seleccionar a qué hora quieres, ¿ qué hora es tu hora de la cena? Y seleccionas las cinco, o las seis o las siete, sólo va a ser una vez. Sólo tienes una vez, di en este día que vas a cenar. Si hubo otras veces que no estás viendo, es como puedes combinarlo con un campo de formulario abierto si presionas Otro que el formulario abierto rellenado va desde el estado deshabilitado, que de nuevo está en 20% de opacidad y ahora se convierte en el estado predeterminado. Y un usuario puede ingresar a una ranura que no está viendo en base a su hora de la cena aquí. Genial. Puedes hacer botones de radio personalizados aquí donde en este caso tenemos un selecto tu género. Y así, o eres hombre o mujer. Y si eres una hembra, tú, cuando pasas el ratón por aquí, verás el contorno rosa como un flotador. Y luego tendrás este estado seleccionado, que es el estado a todo color aquí. Pero de nuevo, estamos usando botones de radio para la cantidad correcta de contenido o función, que es una sola selección. Se puede ver que este es un estilo personalizado para una radio, pero no se ve como un botón de radio, pero funciona exactamente de la misma manera un botón de radio donde si fueras a hacer clic en Mel, desseleccionaría el y seleccionaría al macho. Aquí. Se puede ver la misma selección aquí es que tengo Mel seleccionado y femenino no. Y si tuvieras que pasar el ratón sobre el estado femenino aquí, pincharía y hacía clic. También seleccionarías aquí la tarjeta femenina. La diferencia es que en realidad incluimos el botón de radio aquí en la propia tarjeta, ¿verdad? Por lo que agregamos la tarjeta. Sin la tarjeta, se vería algo así. Agregamos aquí la tarjeta para darle un poco más de pulir de estilo. Si tienes más de tres selecciones de botones de radio como esta, dispóngalas verticalmente. Está bien hacerlas lado a lado aquí. Si tienes dos o tres, probablemente puedas empujar a cuatro. Pero más que eso, quieres colocarte verticalmente, más fácil de leer y más fácil de escanear. Muy bien, así que aquí tienes una selección donde tienes un montón de estos botones dispuestos aquí. Y lo que pasa cuando están dispuestos verticalmente así es que quizás no tengas suficientes bienes raíces para que todos estos quepan y definitivamente no quieres descomponerlos en dos líneas, solo ve lo raro que se ve. Y lo que sucede es que el usuario tiene problemas para escanear la asociación entre el botón de radio que seleccionó y el tiempo. Entonces se puede ver que se inpute a las siete en punto, pero a veces puede ser confuso si ponderado es el botón aquí más a las seis en punto, o es a las siete en punto? Donde si lo colocas verticalmente así, puede tomar más pantalla inmobiliaria. Pero en lo que respecta a la función, es mucho más claro en la relación entre el botón de radio y el campo de tiempo. Si tienes más de, digamos, diez opciones, entonces es mejor solo volver a usar un menú desplegable. El desplegable sirve a la misma función. Es una selección a la vez. ¿ A qué hora te vas a la cama? Y tú vas a hacer nuestro texto fantasma aquí. Entonces ejemplo 1030, pueden entrar, hacer click en el menú desplegable, hacer click en el menú desplegable, seleccionar 1030 o lo que sea, sea cual sea la hora que llegues a la cama, tal vez cuatro AM. Estamos aquí. Ocupa un poco demasiada pantalla de bienes raíces. Y es mucho que escanear para un usuario de inmediato para ver todas estas opciones donde un desplegable es mejor porque lo ocultará dentro de la ventana. Guardarás la pantalla de bienes raíces y el usuario puede desplazarse o deslizar para encontrar su ventana de tiempo preferida. Muy bien, entonces lo siguiente aquí es solo recordar una opción a la vez. Únicamente. Escoge un número uno a cinco, solo los escoges un número, número uno. Aquí se puede ver que estamos rompiendo las reglas fundacionales de los botones de radio. No se puede tener más de uno seleccionado. Eso se refiere más a un tipo de interacción de casilla de verificación y no a un tipo de interacción de botón de radio. Muy bien, tan buen segue. Vamos a hablar de casillas de verificación. Así que de nuevo, las casillas de verificación se usan cuando hay una lista de dos o más opciones. Y su función permite que un usuario seleccione más de una opción dentro de los valores de selección. Por lo que no hay, no hay casilla de verificación está seleccionada por defecto y el usuario puede entrar y anular la selección más de una opción a la vez. O puedes tener algunos casos en los que estás filtrando una lista. Puedes tener todos estos preseleccionados ya y el usuario puede entrar y anular la selección en base a eso. Pero en este caso, queremos que vengas y selecciones tus sabores favoritos de helado. Puedes ver aquí donde el usuario hace clic o toca alguno de estos. Y luego verás la selección múltiple aquí con la casilla de verificación. Nuevamente, puedes combinar las casillas de verificación con los desplegables como hablamos en el video desplegable donde tenemos el campo de formulario aquí haces click, tienes las casillas de verificación aquí haces click en Galletas y cremas de camino rocoso de vainilla. Y luego verás que las selecciones de formularios de píldora aquí aparecen. Y de nuevo, el usuario puede hacer clic en uno de estos para eliminar que también lo desmarcaría en la casilla de verificación. Los estilos son bastante simples, solo tiene un esquema por defecto. De nuevo, puedes hacer dos cosas por el hover. Puedes hacer que el contorno vaya azul o puedes llenarlo de azul y luego el estado activo cuando está seleccionado, tienes la pequeña marca de verificación. Y luego se puede tener el estado deshabilitado cuando algo está seleccionado en el estado activo. Por lo que de nuevo, 30% de opacidad. O puedes tenerlo en el estado predeterminado donde no hay nada seleccionado. Y de nuevo, eso es 30% de opacidad. Puedes personalizar casillas de verificación. Así que de nuevo, solo usando estos para el tipo correcto de contexto antes de usarlos para como ¿Eres 21 o mayor? Sí o no, ¿o varón o mujer? Una selección por criterios donde para los botones de radio donde las casillas de verificación podemos hacer múltiplos. En este contexto, vamos a preguntarle a alguien cuál es su favorito, seleccionar su actividad favorita. Cuando el usuario coloca el ratón sobre cualquiera de estos, podemos usar el trazo de contorno para indicar que estos están vivos y se puede hacer clic y se puede pulsar. Y cuando hacen clic y tocan en uno de estos, llenamos aquí la forma de la tarjeta. Y ahora se pueden ver estas son casillas de verificación personalizadas. Permiten a un usuario seleccionar más de uno y luego un poco más fantasioso que solo la casilla de verificación aquí con texto a su lado, podemos agregar pequeñas ilustraciones e iconos geniales. También tengo todo un video sobre solo iconos e iconografía y las mejores prácticas torno a usarlos hacia el final de la clase. De acuerdo, vamos a pasar a alternar. Los alternadores son más o menos un interruptor que lo representa permite a un usuario encender y apagar las cosas. Y representa mucho de lo que vemos en nuestras casas, que son interruptores de luz. Por lo que hay elementos más accionables utilizados en los ajustes. El asunto es como Wi-Fi y Bluetooth. Verás mucho esto o desactivando las notificaciones. Pero la función de núcleo a un toggle encendido y apagado. Te estás poniendo algo o estás apagando algo. Donde una casilla de verificación es más de un criterio de selección y un botón de radio es también un criterio de selección. Un toggle tiene un poco más singularidad en ese sentido porque es más de un tipo de interruptor a menudo en. Lo ves aquí como las notificaciones recibidas. Verás que el estado predeterminado es gris. Y luego cuando el usuario lo encienda, dirán activar las notificaciones de encendido. Cuando esté encendido, dirá desactivar las notificaciones. Una forma en que puedes cambiar los textos etiquetados para ayudar a indicar el estado en el que se encuentra esto. También puedes hacerlo aquí. Recibió las notificaciones que pospuso a la izquierda, en la oficina derecha un color más oscuro ahora es del mismo color que el botón de radio o el toggle. Y luego cuando lo enciendas, se enciende, se convierte en el estado de color que se usa para el on-estado del toggle y off vuelve a ese estado gris. El mismo trato aquí. Aquí hay otro ejemplo donde es un poco más pequeño y más común en la web es este tipo. Y haces click en el círculo, se desliza por encima. Nuevamente, agregamos algún color para indicar que esto está encendido. Y luego puedes apagarlo de nuevo como el llamado a la acción o encenderlo cuando está en el estado predeterminado aquí. Vamos a meternos en algunos do y no hay aquí. Nuevamente, como mencioné antes, usa el color no solo en el interior del cuadro, sino también en el texto para indicar el estado actual. Y evita hacerlo donde el texto está dentro del toggle porque no está claro si estás mirando esto, si lo estoy apagando deslizando o si el estado está apagado, o en este caso aquí, ¿ está encendido o voy a encenderlo por, al involucrarse con este toggle? Entonces nuevamente cambie los textos para que el usuario sepa lo que está sucediendo. Entonces en lugar de un texto de llamada a la acción, también se puede dar a los textos estatales donde solo decir cuál es el estado de este toggle en el momento actual, que Wi-Fi está apagado. Y cuando toque y deslice o toque y haga clic, verá que el cambio de texto Wi-Fi está activado. Nuevamente, evite algo como esto con la casilla de verificación donde solo dice Wi-Fi encendido y está comprobado y Wi-Fi activado. El checkbox de nuevo, es más de un criterio de selección donde si tuvieras un Wi-Fi en tipo de criterios como este es mejor usar un toggle. Recuerda que la izquierda es siempre la fuera del estado y la derecha es siempre el on-state. Nuevamente, coincida con las convenciones actuales de alternancias existentes. No cambies esto donde está apagado y la izquierda está encendida. Está bien, genial. Eso fueron botones de radio y casillas de verificación y alterna. Y el siguiente que voy a cubrir en el video son formularios dirigidos y formularios de búsqueda . Y te veré ahí. 10. Direcciones y formularios de búsqueda: Muy bien, así que hablemos de formularios de dirección y formularios de búsqueda. Estos dos son tan comunes y suenan fáciles, pero en realidad son bastante complicados, sobre todo foros de búsqueda que solo quería romper estos y simplemente hacerlo, hablar y ejemplos y hacer y no sólo en estos dos tipos de campos de formulario. Nuevamente, un formulario de dirección como suena, son formularios para tu dirección. Son muy comunes. Los usamos todo el tiempo. Mi favorito para usar es el campo de un formulario, formulario de dirección autocompletar. En lugar de tener la dirección de domicilio con la, ya sabes, tu dirección, tu ciudad, tu estado, tu código postal, tu país. Lo que puedes hacer es que puedas hacer algo como esto donde tengas tu domicilio, tienes los textos fantasmas, solo por defecto ingresa tu dirección. Y al escribir aquí la dirección de domicilio, usarás la búsqueda automática o autocompletar aquí abajo, y eso va a buscar en la base de datos de direcciones basada en el recuento de caracteres que has metido en tu auto, en tu formulario rellenado aquí. Por lo general, estos no comienzan hasta que tengas al menos tres o cuatro caracteres en los campos del formulario. Y entonces eso comenzará a estrecharse, estrechando esta lista desplegable de resultados. Y dentro de la lista aquí, posible que tengamos 30 o 40 resultados basados en tu entrada aquí, pero solo mostramos cinco guión siete a la vez. Es más fácil para un usuario escanear cinco o siete de estos para ver si son coincidencias allí. Si hay, no veas el partido, pueden seguir escribiendo fácilmente apretado. A medida que siguen escribiendo, esta lista de direcciones autocompleta se va a filtrar en función de los recuentos de caracteres. Y ese resultado de búsqueda será más pequeño y más pequeño y más pequeño y más exacto a la dirección que estás introduciendo como usuario hasta que encuentres tu dirección. Entonces en este punto el usuario puede dejar de escribir. Aquí, ver la dirección que quieren poner, que es cinco por cinco Gary Street, San Francisco. Pueden arrojarse hacia abajo en su teclado. Nuevamente, es necesario tener el estado de desplazamiento aquí, o el estado de desplazamiento también aparecería cuando el error, cuando el usuario estaba tecleando hacia arriba y hacia abajo en el teclado. Después cuando presionan Enter, se puede ver ahora que el formulario de una dirección tiene el nombre de la calle, la ciudad, el estado, y también el país. Y incluso puedes agregar código postal a esto también. Puedes presionar fácilmente X o pulsar X en el campo del foro, que te llevará de vuelta al estado predeterminado aquí. Así que una manera muy fácil de conseguir la dirección de alguien volviendo a esa palabra clave, affordance, como la asequibilidad del usuario, ahorrándoles tiempo, ahorrándoles energía. Aquí hay más de una forma manual tradicional. Nuevamente, no es una marca o un descanso. Verás esto todo el tiempo. Pero te mostraré una forma en la que aún podríamos utilizar la base de datos de búsqueda automática automática de campos de dirección para poblar toda la información que necesitas para una dirección aquí, incluso si tienes que romperla fuera así, donde tienes la dirección, la ciudad, y el estado, y el código postal. Entonces, tradicionalmente, lo que se vería esto es algo así y tendrías que escribir tu dirección. Tendrías tu segunda dirección, tecleas en tu ciudad. Tendrías un desplegable para tu estado. Tendrías un código postal y un desplegable para tu país. Nuevamente, nunca use desplegable para una ciudad. Siempre se puede utilizar el menú desplegable para una selección de estado. Rara vez se escribe en el estado aquí. Por lo que siempre usa aquí un texto de forma libre para la ciudad y un desplegable para el estado así como para el país. Vale, así que de nuevo, si puedes evitar esto, hazlo. Y aquí hay una forma en que puedes combinar la que acabo de mostrarte arriba con este tipo de interacciones de campo de formulario. Entonces digamos que tienes la dirección 12, tienes la ciudad, el estado, el código postal. Y ya sabemos que la mayoría de la gente va a ser por nuestro servicio que brindamos son en USA. Podemos salir de ese EUA. Entonces lo que pasa aquí es que un usuario entra en el campo de dirección número uno, escriben en su dirección, ven el partido. Yep. Esta es la calle Geary 515, San Francisco. Hacen click en eso. Y lo que hace es poblar la dirección, la ciudad, el estado, el código postal, y el país dentro estos campos de formulario para que no tengan que entrar en cada uno de estos. Esta es una forma inteligente de hacer la dirección Formularios. Vamos a ver el formulario de búsqueda. Entonces el cuadro de búsqueda es esencialmente una combinación de un campo de entrada y un botón de envío. Y parecen súper fáciles. Pero en realidad hay mucho para ellos. Y para sitios complejos, el cuadro de búsqueda puede ser la principal forma en que un usuario encuentra algo o lo primero que hacen cuando vienen a tu sitio, piensa como Amazon. Lo primero que haces un Amazonas es ir a buscar. Buscas lo que estás buscando. En estos casos, el formulario de búsqueda es un gran problema. Y la página de resultados que el cuadro de búsqueda te da como también gran cosa. Recuerda que la búsqueda solo es necesaria cuando tienes mucho contenido. Si no tienes mucho contenido en tu sitio, no necesitas buscar tamaño extraño donde estamos priorizando productos que estamos construyendo. La búsqueda viene más tarde después de que tengamos más cosas como si un usuario ingresa un montón de información que necesita buscar. Normalmente no empezamos con la búsqueda porque ni siquiera tenemos un producto todavía. Lanzamos sin búsqueda, dejamos que los usuarios ingresen información que la esperaron técnicamente quieres buscar en algún momento de nuestra aplicación. Y luego en ese punto añadiríamos la búsqueda más adelante. Entonces eso es solo una especie de mecanismo de alcance o una prioridad establecida para lanzar nuevos productos. Pero si tienes un sitio de comercio electrónico donde solo vas a tener un montón de cosas que alguien que necesita encontrar, entonces busca súper importante y debería ser casi lo número uno que harías, comenzarías a construir además del contenido y los productos en los flujos de checkout que tendrías. Nuevamente, haz que la búsqueda sea accesible en cada pantalla de un sitio complejo y no dificultes para los usuarios encontrar la búsqueda. Por lo que normalmente se encuentra en la parte superior derecha o centro de su barra de navegación en su sitio de búsqueda. Aquí hay un par de ejemplos. El primer ejemplo aquí es un campo de búsqueda común, pero no hay botón de enviar. Y el botón de enviar se activa haciendo teclado Enter en tu teclado. Y eso presentará aquí el campo de búsqueda y llevará al usuario a la página de resultados. Por lo que en ese caso, de nuevo, autocompletar es muy importante. Y puedes usar textos fantasmas para insinuar algunas de las posibles búsquedas que queremos que busque un usuario. El segundo ejemplo aquí es un botón físico. Nuevamente, el usuario aún puede presionar Enter en el teclado para enviar la búsqueda e ir a la página de resultados de búsqueda. O pueden hacer clic en el botón Buscar el cual los llevará a la página de resultados de búsqueda. Y en ambos casos, autocompletar sigue siendo súper importante. Pero recuerda que el botón de búsqueda física visual transmite al usuario que si no hay coincidencias en el autocompletado, que aún pueden presionar el botón de enviar e ir buscar cualquier partido que tuviéramos que nosotros no pudo encontrar el autocompletar. Sé que suena algo complejo, pero déjame, déjame mostrarte el ejemplo aquí. Por lo que Google es un gran ejemplo de un campo de búsqueda sin el botón de enviar. Pero quiero mostrarte cómo cualquier manera ya sea que estés enviando en el teclado o tienes un botón físico en el que puedes hacer clic o aún poder presionar Enter en tu teclado como envío. Pero quiero mostrarles cómo toma la autocompleta, toma un papel en esto. Digamos que aquí estoy en Google y estoy escribiendo tipografía. Se puede ver que me está dando el en este caso, me está dando, creo que diez resultados de búsqueda aquí que son más comunes. En este punto, lo que podría hacer es que puedo arrojar mi teclado, me estoy estrechando. Voy a flecha hacia arriba. Puedo salir X o puedo hacer click en uno de estos editar, llévame a mi página de resultados. Pero a medida que sigo escribiendo, los resultados de búsqueda comienzan a conseguir cada vez menos. Y voy a empezar a escribir algunos números raros aquí. Muy bien, así que ahora ya no hay más resultados de búsqueda. Pero aún puedo presionar Enter en mi teclado. Sea cual sea el sistema que estemos haciendo va a hacer su mejor trabajo para igualar las opciones que estuvieran allí. Y dame la página de resultados aquí. Ahí es donde entra el autocompletar, es muy útil. Y también el botón Buscar, porque el botón de búsqueda siempre transmitirá al usuario que no importa cuál sea su entrada, aún se puede buscar. Puede haber estos raros casos en los que tu página de resultados no resultó nada. Puedes volver a la página resultados sin resultados en este caso, puedes ver que Google tiene cerca de ocho resultados. Con base en eso. Esto es buscar en toda la web un nombre realmente extraño como este, y todavía hay ocho resultados. Veamos si podemos conseguir que haga como ningún resultado aquí. Sí, sigue siendo, sigue siendo resultados. Entonces se puede tipo de ver a lo que quiero decir aquí es que el, si estás diseñando algo para la búsqueda, no solo el campo de formulario de búsqueda, que pensar en la forma en que el usuario autocompleta su búsquedas. La forma en que seleccionan la autocompleta. La página de resultados de búsqueda que coincide con los resultados. Y si no hay resultados, aún pueden presionar Enter en el teclado e ir a una página de resultados. Y si no hay resultados, tenemos que pensar en esa experiencia de usuario. ¿ Acabamos de tener claro texas lo ha arrepentido, no hubo resultados en esa búsqueda. Y sin embargo nos acercamos ese tipo de caso de borde es importante. Nuevamente, cuando piensas en solo buscar, suena fácil, pero es mucho más complejo. Y te mostraré algo más de complejidad cuando entre en una interfaz móvil sobre cómo funciona la búsqueda. Rápidamente, vamos a pasar por el auto-completado. Así que de nuevo, coincidimos cinco a siete en el caso de Google, parece que hicieron diez. Los coincidencias que son más comunes en base a la selección que el usuario ha realizado. Este caso, solo estamos mirando a la OPS. Estamos tratando de emparejar teléfono aquí es lo que estamos asumiendo que el usuario quiere buscar en base a las funciones de búsqueda más comunes que hemos tenido en nuestro sistema que comienzan con la OPS. Nuevamente, la x aquí, el usuario puede cancelar esto. Y luego como acabo de hablar del autocompletar SOS arriba, este menú desplegable solo aparece después de las tres primeras búsquedas. Le da al usuario una lista mucho más clara definida de lo que está buscando. Nuevamente, no sobrecargue a sus usuarios con sugerencias en cinco guión siete a diez opciones aquí en el autocompletar funcionará muy bien. Y no te olvides de definir lo que el estado de desplazamiento o el estado de flecha arriba y abajo del teclado puede ser el estado de desplazamiento o el estado de flecha arriba y abajo del teclado. De nuevo, puedes usar la misma interacción para búsqueda en tu barra de navegación web. Y se puede hacer un estado predeterminado como este donde realmente mostramos la búsqueda de palabras y mostramos el icono de búsqueda flotando, se ilumina y un estado activo. Podemos tomar más bienes inmuebles como este, podría empujar el texto o podría ocultar todo el texto. Aquí. Puedes hacerlo muy largo. Y el usuario comienza a escribir. Añadimos el autocompletar caído. Pueden presionar X aquí para eliminar la lista. O pueden presionar la OPS y en realidad presionando el teclado enter. Y tendríamos que definir una página de resultados de búsqueda para lo que creemos que son las mejores opciones para OPS o si no hubiera resultados. O pueden decir todo lo que realmente estaba buscando fundas telefónicas. Haga clic en fundas telefónicas y las llevamos a una página de resultados que muestra de forma las fundas telefónicas. Y en esa página de resultados, aún deberían poder buscar, deben estar en todos los lugares. Aquí está la misma interacción de búsqueda para el móvil. Y todo lo que hicimos aquí es que tengo un video donde hablo menús y cajones aquí hacia el final de la clase, hablaré mucho cómo funcionan estas navegación a nivel padre en tu barra de navegación se colapsará en iconos de menú, o en este caso como un menú desplegable. Todavía tenemos aquí la barra de búsqueda. Y para el móvil tomará la barra de navegación completa aquí bloqueo del usuario y los mantendrá enfocados en este estado de búsqueda. Otro do, algunos lo hacen y no son para las cuotas por la web es sólo en realidad mostrar si tienes la inmobiliaria, mostrar la palabra buscar. Se ahorra, tomará un poco más de espacio. También puedes ampliar el estado activo de la búsqueda para dar un poco más de bienes raíces para el usuario escribiendo. Pero si tienes la sala, mostró la barra de búsqueda para dar o el texto de búsqueda aquí y el campo de formulario de búsqueda aquí como mejor transporte. Y muestra al usuario, también les da un poco más de tap target, dónde tocar la barra de búsqueda en lugar de hacer algo como esto, aunque se ve elegante, es solo este pequeño ícono de búsqueda. Si tienes la inmobiliaria, muestra el formulario relleno shell, el texto fantasma de búsqueda aquí, Es más clicable inmobiliaria otra vez, affordance. Tiene un transporte más fuerte, siempre recordando al usuario que hay una búsqueda aquí frente al ícono. Pero si solo tienes el, cuando esta respuesta es esta barra de navegación aparece en una interfaz móvil. Entonces es bueno mostrar solo el icono real en sí porque no tienes la habitación para toda la barra de búsqueda. Es sólo cuando tienes la habitación ¿ quieres mostrar los textos de búsqueda y el campo extranjero? Y evita hacer algo como esto para web cuando obviamente tienes la sala para mostrar el campo del foro y la barra de búsqueda. E incluso en móvil si tienes la habitación para hacerlo aquí, pero es aceptable si tuvieras algo como esto también donde era solo el icono de búsqueda real aquí cuando está en móvil. Cosa que quería llamar para móvil también es que es una especie de interacción complicada que no necesariamente recogerías de inmediato a menos que te involucres mucho con la búsqueda en este tipo de mentalidad. Así que cuando lo estés, cuando estás haciendo diseño de interacción o una perspectiva UX, cada vez que estés usando dispositivos, solo piense en cómo se comportan estas cosas. Esta es una interacción muy común en Apple. Interfaces es el cuadro de búsqueda de mensajes. Si miras el mensaje Turcos en este momento en mis mensajes, puedo crear un nuevo mensaje aquí con la pequeña caja azul aquí. También tengo la configuración con los tres iconos aquí, y tengo aquí esta barra de búsqueda. Lo que sucede cuando hago clic en la búsqueda o toque en la barra de búsqueda aquí es esta barra de búsqueda realmente flota. Y me pone en un modo de búsqueda donde todo lo que puedo hacer en este punto es que me está enfocando en la búsqueda. O busco, puedo presionar Cancelar, y volver al modo que estaba antes. Puedo escribir en mi búsqueda, empiezo a ver el auto completa y los coincidencias a mi búsqueda a continuación. Puedo presionar X a X fuera el texto fácilmente y seguir escribiendo otros textos. Esta es una interacción muy buena porque enfoca al usuario en un objetivo y tarea específicos, que en este caso es la búsqueda. La cosa que querrías evitar. Este tipo donde digamos que solo presiona Buscar. Ahora estoy en el modo de búsqueda y no estoy enfocado en el mismo punto de búsqueda. Puedo entrar y presionar Crear nuevo mensaje. O podría entrar en la configuración aquí, puedo seleccionar nuevos mensajes, puedo editar los nombres, puedo hacer las fotos. También puedo ver los textos de mi mamá aquí dentro del estado de búsqueda también. Por lo que no es mantener al usuario enfocado en este tipo de estado. Hay demasiadas acciones sucediendo además, lo único que estamos tratando de lograr para este usuario es la búsqueda. Tocan la búsqueda. Están informando a la interfaz de usuario que quieren una búsqueda. Entonces hacerlos enfocados en esa interacción es importante frente a algo como esto. Es una interacción complicada, complicada, pero tú, ya ves por qué lo hacen. Esto, tiene mucho que ver con transporte y mantener al usuario enfocado. Versus aquí, hay demasiadas cosas sucediendo a la vez. Impresionante. Para que envuelva formularios de dirección y formularios de búsqueda te verá en el siguiente video. Hablaremos de barras de pestañas y barras de título. 11. Tab-Bars y barras de Tab-Bars: Muy bien, Bienvenido al siguiente video. Vamos a cubrir barras de pestañas y barras de título. Empecemos con barra de pestañas. Por lo que unas palabras tabú también se conocen como barras de navegación inferior. Y aparecen en la parte inferior de las pantallas de nivel padre de una aplicación. Y permite a los usuarios cambiar rápidamente entre diferentes secciones de la aplicación o destinos dentro de la aplicación. Y se utilizan para aplicaciones móviles y tabletas o al ver un sitio web en un dispositivo móvil o tableta. Pero evite usar estos para cualquier cosa que esté relacionada con el escritorio del sitio web. Todos los hemos visto. Se ven como estos aquí en la aplicación bot beauty, esta pequeña sección aquí, esa es tu barra de pestañas. Entonces es un elemento de interfaz de usuario de navegación. Y antes de meternos en algunas de las mejores prácticas y algunos consejos sobre usarlas, sí quiero hablar un poco arquitectura de la información porque como vamos a empezar a meternos en más videos, hablaremos no sólo de niveles de arquitectura de la información, sino que también se aplica a la navegación. Entonces, si piensa en navegar contenido dentro de su sitio o barras de navegación o cómo navega una aplicación de experiencia de usuario solicitante de usuario, o cómo se navega el usuario a través de su experiencia de usuario? Mucho de eso tiene que ver con la arquitectura de la información o IA. El fundamento básico justo en un nivel básico es que tenemos un sistema como este donde tienes un nivel padre y luego tienes un nivel hijo. Entonces el niño tiene una relación con el padre, y luego usted tiene un nivel de nieto. Entonces el nieto tiene una relación con el nivel hijo. En el mundo de, en este ejemplo voy a dar es como helado. El nivel de los padres es como tamaños de helado , tamaño pequeño, mediano, grande o cono. Y el nivel niño, de la información que se relaciona con el nivel padre de tamaños de helado es sabores de helado. Porque si eliges un tamaño grande, puedes obtener tres cucharas de diferentes sabores. Bueno, si eliges un pequeño tamaño de sabor a helado e-mail y obtienes uno o un sabor si eliges un tamaño pequeño. Para que puedas ver cómo hay una relación entre ese nivel hijo y ese nivel padre. Y luego desde el nivel nieto en la analogía de helados aquí hay coberturas de helados. Y tiene una relación con los sabores porque los sabores dictarán o indicarán qué tipo de topping querría en su helado. Cuando pensamos en niveles importantes de información, el padre es lo más importante. Segundo para el padre es el hijo, y tercero para el niño es ese nieto. Y en lo que respecta a la jerarquía e importante ver, una de las cosas que aquí es interesante es que esto se aplica a la forma en que la gente piensa también en la información. Eso se llama modelo mental. Y hablaré de esto cuando lleguemos a los videos del menú. Pero si vas a cualquier heladería en cualquier parte del mundo, lo primero que te preguntaron que son los tamaños de helado. No entran y te preguntan un cool Muy bien, bueno, ¿qué coberturas te gustaría? Eso es algo extraño. Por lo general comienza con este nivel establecido de arquitectura de la información que se aplica a la convención común de helados, jerarquía y modelos mentales de helado que existe en el mundo. Por lo que comienza con tamaños que va a sabores y que va a coberturas. Este nivel de comprensión de cómo información se relaciona entre sí en un punto de vista jerárquico es importante a medida que pasamos por estas clases. Está bien, genial. Así que hablemos de las mejores prácticas para las barras de pestañas. Entonces como dije antes, categoriza el contenido de nivel superior en tu barra de pestañas. Entonces esos destinos son esas categorías deben ser nivel padre como casa, perfil, tienda, navegar, ese tipo de cosas. Utilice la barra de pestañas estrictamente para navegación y destinos, en realidad no elementos no relacionados. Entonces no debería ser como cosas donde un botón de acción o harías algo. Se trata de destino enfocado y la navegación enfocada. Para tu móvil y tablet. Tabs. Sólo por lo menos, hay que tener dos categorías. Y al máximo, puedes tener cinco, pero no más de cinco y no arriendo menos de dos, y me meto un poco más que eso en el do's y no lo hagas. Nuevamente, no utilices estos para el escritorio web. Son los mejores para dispositivos móviles y tabletas. Y no ocultes la barra de pestañas cuando el usuario toca otra opción dentro de la barra de pestañas. El tamaño del grifo por pestaña es alrededor de 40 píxeles por 40 píxeles como mínimo. Pero puedes conseguirlo hasta 75. Por 75. Son mejores que lo que llamamos el menú de hamburguesas. Si recuerdas, lo tengo, tendré todo un video en solo menús, pero el menú de hamburguesas es una especie de elemento A UI que alberga opciones de menú es donde el usuario hace clic en él. Revela esas opciones al usuario, lo que nos ahorra bienes raíces. Y puede albergar muchas más opciones de las que podríamos mostrar en pantalla. Pero si podemos categorizar nuestro sistema de pestañas o nuestro perfil o nuestro sistema de navegación a nivel padre necesita al menos dos a cinco, entonces no necesitamos una hamburguesa. Podemos usar la barra de pestañas y funciona mejor porque expone estas opciones en el nivel principal de una pantalla. Así que de nuevo, se remonta a ese affordance. El usuario no tiene el resplandor. Haga clic en el grifo en el menú. Ver el menú toca de nuevo en el elemento de menú y luego ir y adelante. Pueden fácilmente con una pestaña, ir a través de las secciones de nivel padre de su sitio web o experiencia de usuario. La barra de pestañas, recuerda, siempre permanece fija a la parte inferior de tu teléfono o tablet. Nunca debe desplazarse. Y asegúrate de que haya un claro activo y por defecto permanecer activo cumpliendo el estado en el que está el usuario. Y un estado predeterminado, los estados que el usuario o los destinos o toques al que el usuario no ha ido y no está encendido, entonces nunca tienen una opción de pestaña de estado deshabilitada. Todas estas opciones de pestaña deben ser tappables y no deshabilitadas una donde no pudieras ir aquí. Puedes hacer estas secciones aquí unos 90 píxeles de altura a una altura de 100 píxeles. Y luego de nuevo se puede ver este rectángulo de puntos rosa es de 50 píxeles por 50 píxeles. Entonces el área objetivo, es decir, el área de tap para el usuario. No es el ícono. El área superior es un espacio invisible. Queremos hacer ese espacio más grande que este ícono de aquí, ¿verdad? Por lo que todos estos tendrían un área de tap que se vería así. Y asegúrate de que toques áreas con un mínimo de 40 píxeles por 40 pixeles. Pero de nuevo, tiendo a ir con 50 por 50 solo para que sea un poco más fácil para los usuarios tocarlo. Algunas opciones más aquí se puede ver la pantalla de perfil aquí. El usuario toca el icono de ilustración de Bubba. Llegan a un sitio de compras de bobo aquí y pueden agacharse en cualquier punto al checkout y luego empezar a entrar en el flujo de trabajo de checkout. Algunos otros ejemplos aquí para una de las aplicaciones y actualmente trabajando en. Y se puede ver el teléfono. Vamos a apretar en las cuatro opciones de pestaña. Y cuando lleguemos a una tablet, podemos espaciar esto para encajar el inmueble que tenemos para tablet. El motivo por el cual estos funcionan tan bien es que se colocan en el inmueble más aprovechable en dispositivos móviles. Si estás usando una mano, si eres zurdo, toda la zona verde de tu dispositivo móvil es fácilmente tappable y no tienes que estirarte o no es difícil llegar. Si estás en la mano derecha. Al igual que la mayoría de los usuarios, entonces esto es todo. El verde es genial, natural, fácil de sujetar, fácil de pasar. Por lo que se colocan con alrededor del 80% dentro de un espacio natural, 80 al 90% para que un usuario toque dependiendo de su mano izquierda o derecha. Y entonces esta área de aquí arriba es difícil si estás donde estas cajas grises aquí, esa es una zona dura, pero algunos de los teléfonos más grandes que usamos nuestra mano izquierda. Así que si soy diestro, estoy sosteniendo este teléfono aquí. Usaremos nuestra mano izquierda para cerrar las cosas aquí. Y así que si tuvieras aquí un botón X, en realidad es mejor poner aquí tu botón x. Que sea un poco x. Está bien, genial. Por lo que es mejor tener tu botón x aquí en dispositivos móviles. Entonces por aquí. El motivo por el cual es en realidad bastante cómodo sacar provecho de esta x con la otra mano. Así que estás sosteniendo el teléfono con mano derecha y presionas con dedo o el pulgar con la mano izquierda en la parte superior aquí. Vamos a meternos en algunos do y no hacer un buen uso de Tab Bar, pero más o menos sólo sigue este patrón aquí y vas a ser bueno para ir. Vamos a meternos más en el do's y no lo que no. Así que de nuevo, usa tu uso tu barra de pestañas 45 destinos o cinco iconos son pestañas, max. Y mantén los dibujos muy sencillos como este ejemplo que te estoy mostrando aquí con esta casa detallada así. Esto es tan complejo como se quiere conseguir algo más que eso. Es demasiado complicado. Entonces lo que hay que evitar es no usar más de cinco destinos. Aquí hay seis pestañas y destinos. Todos estos son demasiado apretados. Y cuando creas una aplicación apple, tienes que enviarla a la App Store y Apple revisará tu aplicación. Y si no se ajusta a sus pautas de interfaz de usuario, en realidad te negarán de lanzar tu aplicación en la App Store. Y cuáles son sus estrictas políticas de directriz es que estas tabulaciones solo tienen cinco destinos y no seis o siete. Así que deja en claro cuál es el paso activo, el paso que el usuario está en cosas que ves en el hogar aquí tenemos este pequeño punto naranja, y también hicimos el hogar mucho más oscuro en color. Y los estados por defecto aquí de estos iconos, el perfil y el análisis. Se puede ver cómo estos son un poco más grises. Y el color más oscuro, fuente más audaz y el pequeño punto naranja ayuda. Se puede ver éste aquí. El, el, Aunque el hogar es audaz aquí y sí tenemos un poco de un contorno más negro más grueso para el ícono de casa. Todavía no está suficientemente claro en qué paso los usuarios en qué sección de la aplicación está el usuario? Estamos en el de la izquierda. Si entrecerrar los ojos y mirar, se puede ver el hogar realmente aparece por aquí. También. Recuerda usar iconos consistentes, no mezcles iconos rellenos o acariciados. Se puede ver el de la derecha aquí. Tenemos un lenguaje visual inconsistente aquí al mostrar un icono lleno para el perfil en un ícono de trazo aquí para el hogar. Nuevamente, queremos ser coherentes y estar uniformados con nuestro lenguaje visual. Entonces se utilizan cualquiera de las mejores prácticas, usa iconos rellenos y solo iconos rellenos. Iconos acariciados y solo usan iconos acariciados, pero no mezcle los dos. Pero aquí está el pateador. Puede utilizar un icono lleno para el estado activo. Nuevamente, todos son trazo cuando su estado predeterminado. Puedes ver el valor predeterminado aquí para perfil y un valor predeterminado para analizar aquí. Pero cuando el usuario toca estos, llenamos esta sección de la página analizada. También llenamos esta sección del perfil con nuestra marca. Contamos con una marca de color naranja. Puedes ver cómo puedes usar eso para ayudarte aún más y formar el estado activo de tu aplicación. Y ayuda a traer un poco de marca y un poco de sabor a los iconos también. Nunca añadas un botón en la barra de navegación. Éstas son para fines de destino, no acciones. Y luego nunca use una opción de pestaña como en casa aquí. Al igual que si solo tienes una opción, no necesitas una barra de pestañas. No hay necesidad de navegar. Usa textos pequeños, pero usa un buen espaciado entre letras en el texto pequeño. Por lo que los pequeños textos que puedes usar son de unos diez píxeles. Puedes ir todas las gorras. Utilice un espaciado de letras de 1.5 píxeles. O podrías hacer 12 pixeles. Lo que tengo aquí tout píxeles altos, altura, todos minúsculas, pero ambos tienen un espaciado de letras de 1.5 píxeles. El espacio del espaciado entre letras es el espacio entre las letras aquí. Este tipo de espaciado. Quieres un poco de MIP, espaciado de letras extra para el texto pequeño solo porque hace que sea más fácil de leer. Y no terminarás con que tus cartas estén demasiado revueltas juntas. Te mostraré aquí así. Como si fuera demasiado apretado. Eso probablemente sea demasiado espaciado entre letras. Y al igual que teníamos estaba bien. Está bien, genial. Y luego nunca use dos palabras. Se puede ver compras, casa aquí ha bajado a dos palabras, abarcar dos líneas o texto grande. Por lo que se puede ver este texto es demasiado grande. Sólo se ve caballo. No se ve resbaladizo, no se ve moderno. Y estos son, estos están destinados en su mayoría a ser piezas de navegación y no deben ser demasiado pesados como en el peso visual. Porque quieres que el usuario mire el contenido que estas pestañas albergan y cuatro y un informe versus algo que se destaca realmente fuerte así. Muy bien, pasemos a la barra de pestañas, nuestras barras de título. Por lo que una barra de título proporciona una forma confiable de guiar a los usuarios a través de una aplicación. Y una barra de título muestra información y acciones que están relacionadas con la pantalla actual. Y también se mantiene fijo, lo que significa que no siempre se queda en la parte superior, incluso cuando el usuario desliza o Scrolls. A menudo se emparejan con una barra de pestañas en aplicaciones móviles o tabletas. Por lo más común, verás un sistema como este, donde tienes el título aquí. Tienes un área de acción a la izquierda, un área de acción a la derecha. Y luego tenemos la barra de pestañas que acabamos de hablar aquí arriba en la parte inferior. Verás en una de las aplicaciones más populares es el instagram. Y usan una combinación de una barra de título y una barra de pestañas. Por lo que tienen aquí la barra de pestañas. También utilizan la técnica de un ícono lleno para el estado activo y el pequeño punto aquí para el estado activo, el estado en que se encuentra el usuario. Y luego usan la barra de título para su logotipo y algunos en la página de inicio de nivel muy aparente. Y utilizaron el lado derecho para elementos de acción. Pero puedes ver aquí cuando el usuario toca desde un nivel padre, esta sería una pantalla de nivel padre. una pantalla de nivel hijo, seguimos guardando la barra de pestañas, pero usamos más de una barra de título tradicional aquí donde tienes a los Bulldogs franceses aquí en el medio como el título y la parte posterior botón para volver a esta página de inicio. Y luego tenemos el menú de tres puntos aquí más para configuraciones que se relacionan con esta página. Y solo mira a esos lindos perritos. Mira a este pequeño de aquí. Está bien, genial. Me encanta este tipo. Tengo uno de estos perros. Su nombre es masticable. Soy un gran fan. Aquí está el desglose. Esta área aquí donde ves la batería y tu tiempo y tu conectividad Wi-Fi, eso se llama barra de estado. Y esto es un, un iOS o Apple, android tiene una versión del mismo. También se les llama barra de estado. Simplemente se ven un poco diferentes para Android versus iOS. Aquí se pueden ver los dos. Esto es Android, esta es Apple. El desglose en su mayoría es la sección superior izquierda aquí. Esto se usa principalmente para el botón Atrás o un icono de menú. El apartado medio aquí es para el título para dispositivos Android, el título puede ser sobre alinear a la izquierda. Prefiero que estos estén en el medio, pero depende de la, si estás diseñando una aplicación para Android versus Apple, tienen dos tipos diferentes de experiencia de usuario y usuario lineamientos de interfaz, y hablaré con ambos a lo largo de la clase. Puedes hacer esta sección aquí con la barra de estado encima de la barra de título estando del mismo color. Tengo una altura de 50 a 80 pixeles. Y de nuevo, esta zona correcta es un gran lugar para las acciones. Por lo que un poco tienes este título. Da contextos y ubicación para el usuario. Tienes el botón Atrás que permite al usuario navegar de regreso a donde eran. Y luego tienes elementos de acción en la parte superior derecha que se basan en los contextos que el usuario está viendo. También puedes tener botones aquí arriba. Puedes tener cancelaciones salvo la belleza de éste es que los botones son muy como siempre en tu cara. Si te estás desplazando por un sitio, los botones siempre están ahí, se quedan fijos donde hablamos con las barras de pestañas. No queremos ningún botón en nuestros sistemas de tap, pero podemos tenerlos en la barra de título. Estas son cuatro acciones muy importantes aquí como guardar o cancelar espectadores, poner algo de información y basado en tu configuración. O queríamos que estos botones no se perdieran. Para un relleno muy moderno. Personalmente me gustan los textos pequeños, todas las tapas con mucho espacio entre letras. Se puede ver el ejemplo aquí. A la izquierda, tienes título, de nuevo, todos los gorras. Y se puede ver el de la derecha. Estoy usando 12.1212 píxeles de altura, todas las mayúsculas con espaciado de letras de 2.5 píxeles. Y sólo hace que la aplicación se vea mucho más moderna como, Bueno, lo haremos ahora mismo con este texto aquí. Si lo selecciono, le di mucho espacio entre letras aquí. Hace que la aplicación se vea un poco más elegante, hace que se vea un poco más moderna. Y lo que queremos hacer es evitar algo demasiado apretado como si estuviéramos pasando aquí. Demasiado apretado como esto es solo 0. Esto es por defecto. Para mí eso es demasiado apretado. Tenemos que hacer que esto respire un poco más. Poco pro tip para ti ahí. De acuerdo, Así que las barras de marea en Apple, tienen dos tipos diferentes. Tienen aquí un título estándar que tiene el, lo que acabamos de hablar, una acción a la derecha, botón Atrás a la izquierda y el título de la página que estás mirando en el medio. Y tienen un título de texto grande, que es el título en la parte superior se mueve debajo del, el botón Atrás. Y de nuevo, nada cambia con el ítem de acción. Y esto ocupa más pantalla inmobiliaria frente a la de la izquierda. Simplemente depende la aplicación y a veces del dispositivo Apple, te permitirá establecer grandes títulos dentro del sistema operativo. Di por, por un poco mayor, tus ojos no son tan buenos. Es lo que llamamos una función de accesibilidad. Y ayuda a las personas que no pueden ver pequeños textos a ser capaces leer estos poco más fácil para ellos. La diferencia aquí entre Android a la izquierda y apple, también conocida como iOS a la derecha, es más o menos lo mismo. Es sólo que el título generalmente se centrará para los productos de Apple. Y luego en Android dejarán alinearlo por aquí. El mismo tipo de trato cuando se trata elemento de acción es en su mayoría siguen el mismo paradigma donde tienes elementos de acción en la parte superior derecha de tu barra de pestañas. Es, los títulos irán a la izquierda frente a medio aquí. Me gusta medio porque nos permite utilizar este espacio aquí para cualquier botón trasero o ese tipo de navegación. Normalmente me gusta estilo donde tienes los elementos de acción del botón Atrás aquí y un título en el principio o en el medio. Y no importa, aún podrías diseñar una aplicación Android. Y todavía puede tener el título aquí en el centro del botón Atrás, los elementos de acción a la derecha, y está totalmente bien. Muy bien, otra cosa que puedes hacer aquí Eso es bastante limpio como de nuevo, la corteza del título siempre se mantiene fija. Lo que significa que a medida que el usuario desliza hacia abajo en una aplicación móvil o tableta, la barra de título no va a ninguna parte. Pero puedes hacer este truco donde como usuario estoy deslizando hacia abajo, nuestro deslizar hacia arriba. Y así estoy empujando el contenido hacia arriba, es decir que estoy interesado. Quiero ir a ver más de esta sección, lo que esta sección tiene para ofrecer. Cuando eso suceda, en realidad puedes mover la barra de título en una posición, verás que se va. Y luego cuando me muevo hacia abajo, lo que significa que quizá quiera navegar fuera de esta sección, entonces verás que la barra de título reaparece en base a esa interacción. Verás airbnb usa esto en su aplicación móvil o en su, su sitio web en la web también cuando vayas en dispositivos móviles o tabletas. Y te voy a mostrar un pequeño adelanto aquí. Ya lo puedes ver. Aquí está su barra de título en la parte superior. Esto es que también han agregado algunos filtros en el título. Y tienen la barra de pestañas aquí en la parte inferior. Puedes tocar entre como riesgo, inicio de sesión, deseos, tus estancias. Cuando desliza hacia arriba o desplázate hacia abajo, ves cómo se fue la barra de título y ellos también quitarán la barra de pestañas. Entonces, cuando desliza hacia atrás hacia abajo, verás que aparece cuando desliza hacia atrás hacia arriba. Muy bien, así que estoy deslizando hacia abajo. Nuevamente. La idea aquí es que te interesa, sabes que tu acción es informar al sitio que estás más interesado en el contenido en este momento, cuando desliza hacia atrás hacia arriba, tu acción podría ser relevante para, Oh, ¿necesitas hacer algo con este contenido o navegar fuera de esta pantalla? Se puede ver cómo responde esto, así que están diciendo, vale, aquí está, aquí está su tableta. Te vamos a dar esa barra de pestañas. Aquí está tu móvil. Te vamos a dar esa barra de pestañas. Pero ya ves cuando vamos a la web, no usan la barra de pestañas. La barra de pestañas no es un patrón de palmada. Es un patrón móvil y tableta. Muy bien, genial. Así que lo último que que ver antes de entrar en algunos do y no es que la barra de título realmente puede cambiar y mostrar acciones basadas en la entrada del usuario. Por lo que tenemos aquí una barra de título de navegación predeterminada. Y lo que sucede es cuando el usuario toca una de estas fotos, la barra de navegación cambia y daremos acciones basadas en esa interacción del usuario. Han tocado una foto. Ahora la barra de pestañas cambiando de contextos, lo siento, la barra de título cambiando de contextos a una barra de título orientada a la acción. Por lo que es dejarte saber que tienes uno seleccionado y te está dando opciones que podrías hacer. Podrías eliminar éste, puedes enviarlo. Y luego tienes el menú de desbordamiento, que también se llama menú de kebab sheesh o un menú de kebab aquí, que solo alberga más acciones que están relacionadas con esto también. Es así como puedes usarlo desde un punto de vista de interacción y no solo tenerlo estrictamente para comunicación y contextos y ubicación, sino que puedes tenerlo orientado a la acción. Recuerde resumir, la mayoría las aplicaciones que utilizan la barra de pestañas en la parte inferior, barra de título en la parte superior, es un patrón de diseño común. Ahora vamos a conseguirnos algunos hacer y no lo que no. Tu título para una barra de pestañas debe ser lo suficientemente corto como para adaptarse al espacio. Es como preguntas frecuentes. Y entonces no hagas el título demasiado largo que tenga dos elipses de los tres pequeños puntos aquí. El título debe ser lo suficientemente corto como para volver a encajar el espacio. Y luego otra vez. No hagas el título II largo que tenga que entrar en dos líneas eclipsando, o dos líneas aquí. Coloca aquí las acciones suficientemente ajustadas en la barra de título como tres a cuatro max, cinco es una especie de empujarla. Ves seis aquí es demasiado. Y si tienes un título largo, simplemente no va a fluir con las acciones aquí. Tres es tu número mágico. Ten cuidado con la altura, sobre todo cuando esto se va a arreglar. Esto va a tomar bienes raíces ya que un usuario pasa por su aplicación, también puede tener una barra de pestañas aquí en la parte inferior derecha. Así que eres, eres, eres, estás limitando tu contenido visible aquí solo por esta sección aquí. Así que ten cuidado con la altura de esta barra y no quieres ni por tu barra de título y no quieres que sea demasiado apretada, demasiado alta que otra vez, constricta el contenido abajo y no le da suficiente espacio para ese contenido. Ahí vamos. Hay barras de pestañas y barras de mareas. Te veré en el siguiente video donde cubriremos acordeones y pestañas. Te veré ahí. 12. Acordion y Tabs: Muy bien, vamos a hablar de acordeones y pestañas. El menú de acordeón es una lista de encabezados apilados verticalmente en los que se puede hacer clic, tocado , para revelar u ocultar detalles importantes de una sección. El término acordeón proviene del instrumento musical en el que la función primaria es ampliar y contraer. Entonces de ahí es de donde sacamos eso. Se trata de un menú que se expande para mostrar información y luego se contrata para ocultar información. Lo verás usar para como preguntas frecuentes donde la pregunta es el encabezado o el titular y luego lo abres y ves las respuestas a esas preguntas. Lo verás para anuncios de eventos donde el evento es el encabezado. Y luego tocarás y se ampliará y mostrará los detalles de ese evento. Hemos utilizado recientemente en una aplicación de automóvil donde puedes abrir el acordeón para ver complementos y seleccionar qué tipo de complementos querías decir para estéreo o rems o el interior de un auto. Se veían así. Este es el estado predeterminado donde contiene la información de nivel padre. Usted tiene. Aquí los encabezados. Como un usuario toca sobre él, nos aseguramos de resaltar el encabezado para que el usuario sepa a qué se refiere o se relaciona el nivel secundario de información. Y también la flecha aquí, va unos 180 grados para transmitir aún más que esta cabecera está abierta. Nuevamente, tenemos el estado predeterminado, tenemos el estado activo. Y la función realmente importante de un, un acordeón es que cuando el usuario toca en Wi-Fi es lento, lo que sucede es que cierra el titular que actualmente está abierto, abierto, y luego revela al niño información de nivel en el titular que el usuario acababa de tocar o hacer clic. Se cierra, paga mi factura, paga mi factura va al estado predeterminado y en Wi-Fi es lento, va al estado activo y revela la información de nivel infantil. Basado en ese nivel de padres. Los pros y los contras para estos es el proceso que ayuda a los usuarios a encontrar contenido que son que están buscando simplemente categorizando encabezados. Simplemente pueden descremarse a través de todos los encabezados, encontrar el que buscan y abrirlo. Hace que sea fácil escanear esa información del nivel de los padres y de nuevo, sumergirse más profundamente en la información del nivel del niño. Y es una herramienta útil cuando tienes mucho contenido. Y quieres ocultar cierto contenido, haciendo que el conjunto de contenidos sea más digerible de un vistazo. Y luego el usuario puede decidir en cuál quiere sumergirse más profundo. El estafador es tratar de no usarlos por más de diez opciones porque saltan mucho y tratan de no tener demasiada información de nivel hijo que haga que el próximo encabezado vaya por debajo de la reunión de pliegue, debajo del área de visualización que el usuario está mirando, entonces no puede ver la opción de nivel padre. Si tienes muchas opciones de nivel infantil que empuja todo, todos los demás padres bajan. Y el usuario tiene que ir bastante lejos para ir a buscar otro nivel padre, o tienen que volver a tocar ese encabezado de nivel padre aquí. Entonces si el usuario vuelve a tocar, paga mi factura de nuevo, se cerrará. Entonces paga mi factura aquí, abre, toca pagar mi factura aquí cierra también. Pero si tienes mucha información de nivel de padres o lo sientes, información de nivel hijo, empuja todos estos encabezados hasta el final por debajo del pliegue así. Al abrir y cerrar diferentes cabeceras, tienden a rebotar alrededor y no mantenerse consistentes en la ubicación. Y esta es la ventaja que te hablaré de pestañas. Como las pestañas no saltan, se mantienen en posición cuando el usuario las toca. Pero acordeones, ya sabes, como tú, como estás mirando pagas mi factura y tomas Wi-Fi es lento, se cierra, paga mi factura y el Wi-Fi salta aquí para que reboten en ese sentido. También puedes usar botones plus en lugar de las flechas. Y luego en el estado activo, los botones del botón más van a menos. Puedes utilizarlos en combinación con casillas de verificación también. Puedes ver aquí tenemos características tecnológicas que tocas. En realidad estamos mostrando un número, por lo que tienes 0 seleccionado, tenemos cuatro opciones. El usuario puede tocar fácilmente en C, las cuatro opciones que desea. Tenemos las casillas de verificación aquí a la derecha primero con el precio basado en cada característica. Y pueden seleccionar cualquiera de estas características que tenemos que también crece el número aquí a partir de dos de cuatro opciones. Simplemente tenga este nivel paralelo que el usuario pueda ver. Tal vez tengan que hacerlo. No haríamos de esto un color diferente. Haríamos esto algo así como azul, así. Pero a nivel de padres, pueden ver cuántas actualizaciones ya han seleccionado en función de características tecnológicas o actualizaciones de audio o altavoces. También vamos a las opciones conseguirles 20 gemelos, digo. Muy bien, genial. Así que recuerde mantener el contenido de nivel hijo. Ese es el contenido en el interior que se relaciona con el nivel padre. Mantén ese contenido corto y dulce. Entonces recuerde, no use, evite usar mucho contenido de nivel hijo. Se puede ver como si dijera pagar mi factura y abro esto, estoy como, whoa, eso es mucho. Ahí es donde si tienes esto de acuerdo, no es el mejor mecanismo. Es posible que desee simplemente llevar al usuario a una página separada. O tengo un video aquí en modales y cajones. Y esta sería una opción perfecta para mostrar una fila de tareas solo toma el inmueble completo y el usuario puede cerrar de nuevo y terminar aquí. Si tienes ese problema, este no es el mejor patrón para eso. Si tienes mucha información infantil, este no es el mejor patrón para eso. He visto esto una vez y esto es súper raro. No coloques un acordeón dentro de acordeones. Al igual que los acordeones no deberían tener un padre, un hijo y un nivel de nieto. Es sólo padre e hijo. Así que vi esto una vez y fue súper raro y rebotó alrededor. Realmente me perdí en cuál estaba abierto, ¿cuál estaba cerrado? Por lo que de nuevo, no noten acordeones dentro del propio acordeón. Entonces recuerda, si un usuario va a tocar otra opción, cierra la que ya estaba abierta. No dejes que el usuario abra más de una opción a la vez. Entonces también asegúrate de tener distinciones claras entre los encabezados. Se puede ver aquí usamos las líneas en ésta aquí y vemos estas lineas aquí, estas líneas grises, ayudan a dar las secciones. Y así cuando no tienes esas secciones y abres el acordeón, es difícil ver dónde termina la información de nivel hijo y dónde entra el siguiente titular padre. Eso es acordeón. Entonces vamos a hablar de pestañas. Las pestañas son una de las formas más comunes presentar secciones de categorías. Y permiten que un usuario haga clic y toque en cada categoría, vea el cambio de contenido en función de su selección. Nuevamente, son muy similares a la barra de pestañas de la que hablamos. Simplemente aparecen en la parte superior de los sitios web y por lo general no aparecen en la parte inferior si se cierran en un botón en la parte inferior o necesitas navegación inferior, luego ve a usar las reglas que pertenecen a la Barra de pestañas. Se llaman pestañas porque el origen de la misma, se relaciona de nuevo con el archivador de oficina. Y puedes notar las pestañas sobresalen como estos nivel de información de los padres. Y luego podrías sumergirte en estos, abrirlos y ver que son información relevante de nivel infantil aquí para que puedas ver cómo se remonta a esa arquitectura de la información Hablé en el último video. Estos son comúnmente utilizados para los menús de pedidos de alimentos. Utiliza fichas para el desayuno, el almuerzo, el desierto, o diferentes tipos de categorías de alimentos como comida china o pizza, hamburguesas italianas. Son geniales para dashboards, son geniales para herramientas analíticas. Las barras de navegación en dispositivos Android las usan mucho. Resultados de búsqueda de Google, puedo pensar en todas las imágenes, etcétera Muchos, muchos, muchos casos de uso para pestañas. Son mucho más comunes que los acordeones. Puede ver pestañas para móvil, de nuevo, la barra de pestañas siempre debe ser fija y en la parte superior, nunca poner estas en la parte inferior. Porque si vas a usar estos para la parte inferior, ve a recoger una barra de pestañas y usa ese conjunto de reglas. Hay un conjunto diferente de reglas aplicadas a las barras de pestañas luego solo pestañas. Puedes usar hasta cinco opciones como máximo, sin deslizar horizontalmente, lo que significa que el usuario en una tableta o dispositivo telefónico puede deslizar horizontalmente diferentes pestañas. Esa es realmente las distinciones claras entre una barra de pestañas y pestañas es que barras de pestañas están en la parte inferior y las barras de pestañas nunca tienen deslizamientos horizontales. Sólo hay cinco opciones, max y pestañas. Estos pueden vivir siempre en la parte superior de un sitio, y pueden tener un golpe horizontal, lo que significa que pueden tener más de una opción. Pero por lo general se quedan en la cima porque son configuraciones globales ahí de nuevo, similares a los destinos. Y puedes tener mucho más de cinco con deslizar horizontal. Puedes ver aquí tenemos la barra de título en la parte superior con el logo y nuestro menú de perfil aquí. Entonces tenemos un menú de barra de pestañas secundaria en la parte superior, tiene 90 píxeles de altura. Tenemos los textos que todos los mayúsculos aquí, 11 píxeles de altura con dos píxeles de espacio entre letras otra vez, por lo que todo tapas poco de espacio entre letras. Se puede ver cómo funciona esto como usuario al que solo toco. Y pude ver el elemento no es contenido que se relaciona con el ítem dos aquí. Y si vuelvo a tocar a uno, degustando de nuevo a uno, si toco en tres, me lleva de vuelta a tres. Aquí hay algunos ejemplos de pestañas para la web. Tenemos más de cinco opciones aquí siempre y cuando encajemos en web en consecuencia. Y de nuevo, el usuario puede aprovechar estas diferentes pestañas. Este tipo de imita esa estructura de archivo del gabinete. Cuando piensas en este tipo de información, esto es similar a la donde estás haciendo clic en diferentes pestañas para revelar la información del nivel padre. Y aparentemente la información podría tener botones y texto y fotos e ilustraciones e iconos. Aquí hay una navegación de estilo de pestaña superior. Puedes usar esto para web. Entonces tienes una navegación de pestañas de nivel lateral que puedes usar para web, pero puedes utilizarla solo para tablet. Pero no tenemos suficiente con bienes raíces para dispositivos móviles. Para esto. Si se trataba de un dispositivo móvil, realidad solo estás mirando algo así como mucho de bienes raíces, ¿verdad? Por lo que están mejor para dispositivos web y tablet. Y si hace clic en el elemento dos aquí, se abre el elemento dos y se puede ver la idea que hizo clic en el elemento uno va al elemento uno. De acuerdo, vamos a ver el golpe horizontal. que puedas ver aquí tenemos un sistema de pestañas en la parte superior que tiene más de tres opciones aquí no sabemos realmente cuántas opciones son. Pero hacemos una técnica poco explícita es que queremos una de las opciones, digamos esta opción para que aquí se corte a la derecha. Lo que esto hace es esto es el traspaso. Transmite al usuario que hay más opciones ocultas para que puedan ir y deslizar. Donde si acabas de tenerlo, donde eran sólo las tres opciones y estaban perfectamente igualmente espaciadas aquí, así. Eso no transmite deslizamientos horizontales. Así que siempre queremos cortar uno de estos fuera sólo para dar esa señal visual que hey, usuario en la opción número cuatro y estoy por aquí, ven, ven a buscarme. Tipo de cosa. Solo recuerda, este deslizamiento horizontal solo debe usarse para tabletas y dispositivos móviles. Nunca use desplazamiento horizontal para web. Nadie quiere desplazarse horizontalmente con como el, la barra de navegación en web como esa es simplemente demasiado. A menos que estés haciendo una hoja de cálculo, si estás diseñando un sistema en un dispositivo de escritorio que es una hoja de cálculo entonces sí, puedes usar desplazamiento horizontal, pero no aquí. Ejemplo de la aplicación que actualmente estoy trabajando aquí. Puedes ver, puedes ver las pestañas aquí, día, mes y año. Puedes deslizar horizontalmente para más opciones. Y de nuevo, intencionalmente hicimos este ciclo de factura uno fuera a la derecha solo para informar al usuario que aquí hay más que puedes deslizar. Nuevamente, estos permanecen en posición. Puedes ir a mes, puedes ir al año y ver lo fácil y suave que puedes transitarlos. Doordash tiene el mismo ejemplo aquí, por lo que tiene las pestañas aquí. Si toca y tira y empujas, a la derecha, verás más de la pestaña. Entran ejemplos y están cortando un poco de los regalos. Y te mostraré que así es como se ve en su sitio móvil. Un poco de corte pasando aquí. Se puede ver el mismo sistema aquí usado para web, pero no hacen desplazamiento horizontal. Te dan estas pequeñas flechas y te permitirán ir y venir. Todavía está cortando algunos de estos temas aquí en estas pestañas. Pero así es como funciona. Y si entras en Regalos, entonces va a informar todo el contenido relacionado con el regalo. Se puede ver cómo funciona eso. Y luego volviendo ahora, esto es en un dispositivo móvil, lo harías en la web. Pero si dice en mi dispositivo móvil, sería capaz de deslizar estas categorías, mirando cómo keith, esto es estos pequeños hover. A ver que todos tienen pequeñas ilustraciones a ella. Súper lindo. Vamos a entrar en algunas mejores prácticas para las pestañas. Siempre toma el ancho completo. Incluso si tienes dos artículos, toma el ancho completo. No hagas sólo como un ancho proporcional para móvil, como este espacio vacío aquí. Nunca hagas una pestaña. Si tienes una pestaña, no necesitas hacerlo. Al igual que si solo tienes un nivel de información, no necesitas una pestaña, al igual que deshazte de ella. Utiliza deslizar horizontal en pestañas móviles. Si lo mantiene en la parte superior, y luego nunca poner deslizar horizontal en la parte inferior aquí. Y la razón por la que es muy extraño tu pulgar pase y deslizar estos diferentes artículos aquí. Y si solo quieres, solo dale un tiro, ve en tu teléfono y solo con pulgares empieza a deslizar hacia la izquierda y duele como si fuera fuera extraño después de un rato. Al igual que nuestros dedos están más adaptados para deslizar hacia arriba y abajo y no izquierda y derecha. Está bien, genial. Eso fueron acordeones y pestañas en pocas palabras, y espero que haya disfrutado ese, te vea más en tooltips y sombras en el siguiente video. 13. Consejos y sombras de herramientas: Muy bien, Bienvenido al siguiente tema donde vamos a hablar de tooltips y sombras. Sugerencias sobre herramientas. Es un mensaje aditivo afirmativo y útil que aparece cuando un usuario interactúa con un elemento o una pieza de contenido. Y las sugerencias sobre herramientas generalmente se inician a través de un clic del ratón o toque en un dispositivo móvil. Y de nuevo, son informativos. No deberían ser instrucciones. Solo deberían ser un poco de información adicional si un usuario quiere saber un poco más sobre una pieza específica de contenido que está mirando. Se veían así. Digamos que tenías, aquí tienes un ejemplo de un ejemplo de icono de signo de interrogación donde tienes número CVE y si los usuarios no están seguros de qué es un número CVE en su tarjeta de crédito, pueden pasar el puntero o tocar este ícono. Y entonces esto te daría un poco de información sobre cuál es el número CVE. Y de nuevo, si haces este hover, solo recuerda que puedes hacer clic fuera de esto cuando r, Si haces click en esto, puedes hacer clic fuera de ella para cerrarlo. Si está en el hover, esto se cerrará automáticamente con el ratón alejándose. Y luego para dispositivos móviles puedes tenerlo flotando para web. Y luego para Mobile hazlo donde un usuario toca sobre él para abrirlo y le tocan, luego se cierra. También puedes usar el otro común que es un ícono de info. En lugar de una pregunta que icono de información, mismo tipo de principio aquí este pequeño consejo de herramienta aparece este pequeño consejo de herramientay de nuevo, esta es la información sobre herramientas. Es esta pequeña esta cajita aquí que es la información sobre herramientas usualmente tiene una pequeña flecha apuntando a algo, pero no tienes que tener eso. Pero es otra vez, una pequeña pieza aditiva de información. Puedes usarlo para aclarar un ejemplo de acción aquí. Entonces si tienes opciones de envío o botón que puede no ser tan claro para el usuario cuando se desplaza ahí, mouseover , te da un texto un poco más descriptivo de lo que hace ese botón. puede hacer lo mismo para los iconos. Tienes este ícono aquí, esto aparece. Pero solo recuerda si esta es tu forma principal de educar a un usuario de lo que hacen estas acciones, y esta experiencia de usuario va a vivir en tabletas y productos móviles de lo que no es esto, este no es lo suficientemente bueno porque no hay no hay flotación en productos móviles y dispositivos de tableta también. Así que mejor tal vez agregar algo de texto por aquí para decir duplicado versus solo un icono. Si ese es el caso. Si solo es una aplicación web, entonces sí, puedes hacer algo como esto y utilizar hover para dar esto. Voy a ir a abrir mi email muy rápido y puedes escribir algunos de los emails para mí. Sólo estoy bromeando. Se podía ver cómo en Google lo hacen. Como ¿Cuál es esta pequeña pregunta? Oh, es apoyo. ¿Qué es este pequeño ícono? Oh, es ajustes. ¿ Qué es esto? Oh, es Google Apps. Hicieron lo mismo aquí por esto también. Nuevamente, cuando tú, cuando usas un consejo de herramienta y no estás seguro basado en la información con la que estás trabajando. Si necesitas un consejo de herramienta, solo pregúntate esto, como mira esa información y ve, es esta información que quieres poner en una punta de herramienta necesaria o importante para que el usuario complete su tarea. Si es sí, entonces muestra la información. No lo ocultes en una información sobre herramientas. Si no lo es, no es necesario, solo es texto útil o contenido útil, entonces sí, puedes ponerlo en una información sobre herramientas. He usado este en un producto para editar, realizado muy bien, es que tienes este conjunto de campos de formulario aquí. Del estado predeterminado. Sólo son estas cajas grises. Pero tan pronto como un usuario coloca el mouse en uno de estos campos de formulario, esta información cambia y se basa en el formulario que estás rellenando. Si no estás seguro de qué es un número de medidor eléctrico en tu casa. Una vez llegas a esto y pasas el cursor sobre el ratón o estás haciendo clic en este campo de formulario. Este consejo de herramienta cambiará para dar información explícita sobre lo que es este medidor eléctrico. Una pequeña foto aquí, fue junto con ella para mostrar cómo encontrarla. Esto se llama información sobre herramientas en línea, lo que significa que aparece cuando el usuario está en línea o en enfocado o flotando sobre uno de estos elementos aquí. Teníamos aquí la misma caja que relacionada con los estados del servicio eléctrico. Entonces cuando el usuario estaba en la fecha de servicio o flotó su mouse sobre esta sección, presentó esta herramienta o se presentó este consejo de herramienta para dar una explicación de lo que era esto y lo que esto tipo de contenido fue. Me encantan estos. Creo que estas son formas súper inteligentes de hacerlo. Y si recuerdas el primer video, hablé de hacer solo una forma de columna diseños como este se empareja bien con el espacio vacío para un diseño de una sola columna, un poco más complicado si está en el móvil. Plataformas móviles, pero para web que somos realmente geniales. Vamos a entrar en algunos do y no recuerden, no pongas demasiado contenido. Demasiado. Simplemente debería ser un poco útil de la mayoría como tres o cuatro líneas de mensajes de texto simplemente no debería ser como una frase. Recuerda, no uses cierres, tu herramienta principal para las comunicaciones. Sobre todo si esto va a vivir en un escritorio o una tableta o producto móvil, agrega contextos si es para usuario móvil, como poner aquí la palabra duplicar. Y también puedes hacer lo mismo y sobrecomunicarte para web cuando el usuario pasa el puntero sobre eso. No pongas información importante en un consejo de herramienta. Si estás haciendo que alguien ponga una contraseña y hay requisitos de contraseña, no los tengas en la información sobre herramientas mejor para hacerlo aquí. También puedes fallar lo que llamamos validación en línea, que hablé antes. Puedes dar indicaciones verdes y rojas sobre si hay reescribiendo su contraseña o estableciendo aquí una contraseña que está pasando este criterio. Estamos viendo que la contraseña no puede ser la contraseña antigua. Decían: Oh, parece que no pusiste una mayúscula, al menos una letra minúscula. Te pusiste bien. Tienes ocho personajes más. Tienes al menos dos cartas y otra falla, necesitamos al menos un número para hacer una contraseña adecuada, ¿verdad? Por lo que no quieres que estas cosas oculten en una información sobre herramientas. Esta es información importante para que el usuario complete su tarea. Deberíamos exponerlo. Vamos a repasar las sombras. La regla número uno es no solo usar una sombra predeterminada, nunca. Justo cualquiera que sea el estado predeterminado de sombra, no lo use. Tienes que agregarle. Entonces aquí están los pasos. Tienes la sombra predeterminada aquí tengo esta pequeña tarjeta con un pequeño icono de helado lindo. Quiero agregar una sombra predeterminada a esto. Aquí mismo. Nos va a dar cuatro píxeles en el eje y. Entonces abajo y 0 en la x, realmente nada en la x por aquí, Blair va a ser cuatro. Llegamos aquí con veinticinco por ciento de opacidad. Por lo que el siguiente paso aquí en el paso dos es sumar más al eje x y al eje y. Por lo que dimos 55 en este punto. Ahora puedo ver un poco más de sombra en la línea vertical aquí en el eje x. El siguiente paso, el más importante es agregar algún desenfoque. Pasamos de cuatro a 35 píxeles desenfoque en él. Y se pueden ver las sombras demasiado agudas ahí, es demasiado dura. Como recuerdo en el video de los botones, decíamos mirando las sombras de botones y no seas demasiado duro con las sombras como si hubiera que ser suave y sutil. Entonces puedes ir por la milla extra aquí. Puedes añadir un poco de color a la sombra. Usualmente me gusta usar un gris azulado, no demasiado azul, no demasiado gris, sólo un poco justo en el medio ahí. Haremos que esto parezca muy moderno. Muy limpio. Te da esta bonita sombra de aspecto frente a este borde duro predeterminado. Por defecto aquí, empezando a mejorar un poco con el desenfoque. Y entonces es solo el sutil, bonito gris lo que hace que esto sea realmente bonito. También puedes usar unas sombras interiores. Esto ayuda a crear profundidad aquí para que no puedas ver ninguna sombra interior aquí. Y ahora que tenemos la sombra interior para esto, este círculo de progreso o círculo pastel aquí. Y crea un conjunto de profundidad que esto se está llenando. Esa sombra interior ayuda mucho y son los mismos principios con la sombra interior. No demasiado duro. De nuevo, sólo debe ser, darle un poco, darle un poco de borroso agradable, algún color agradable. Algunos lo hacen y no. Y entonces voy a, en realidad sólo voy a hacer algunas sombras rápidas para que puedas ver, no pongas sombra en el texto. Si tienes una foto aquí y estás como, Oh hombre, mi texto no lee, bueno, no lo resuelvas poniendo una sombra. Lo que hay que hacer es ajustar la foto para que puedas ver aquí hemos añadido una superposición más oscura sobre la parte superior de la foto y luego poner el texto encima para que destaque. Cuando estuve en la escuela de diseño durante todos los años que estuve allí, había en San Francisco en la Academia de Arte Universidad. Había una mujer llamada Mary Scott durante los cuatro años enteros y todo el programa, incluso si te fuiste a un maestro, dijo masticada y fue infalible. Nunca querría ver sombra en un texto nunca. Y luego fue gracioso porque simplemente nunca ponemos sombra en los textos. Y un día tuve mi primer trabajo. Uno de los directores creativos viene porque hago pop ese texto, le pongo una bonita sombra. Estoy como, está bien, genial. Así que de nuevo, se trata de conocer las reglas, pero también se trata de saber cuándo romper estas reglas. Pero regla bastante dura aquí que podrías seguir es simplemente no lo pongas, no resuelvas textos siendo legible sobre una foto con una sombra como tú tienes que manipular la foto. No hagas que tus sombras sean demasiado fuertes. Como esto es demasiado fuerte. Se puede ver el de la derecha. Este tiene un agradable, apenas poco sutil sabor de una sombra. Lo divertido es que puedes hacer que la sombra oscurezca en ese color y opacidad en el hover. Recuerda que la filosofía de un buen hover es que cobra vida. Es como comprometerse conmigo. Aquí se puede ver que esta es una gran técnica para una bonita sombra y luego nos pondremos un poco más oscuros. El color, la opacidad para el hover. Realmente crea el sentido de profundidad donde esta cosa es como un poco más alta que la que está debajo de ella es la de aquí. Así que de nuevo, agradable, agradable, sutil uso de un hover allí. Y luego normal. No pongas demasiado color a la sombra. Como esto es demasiado Como esto está bien. Esto es demasiado. No uses estos bordes duros. Mantén los bordes suaves. Vamos a seguir adelante y simplemente hacer una sombra rápida. Voy a copiar este círculo por aquí. De nuevo, estamos tratando de llegar a este tipo de funciones aquí, pero nos divertiremos un poco. Tenemos la tarjeta blanca que voy a la herramienta llamada Figma. Tendré unos pequeños proyectos al final de los videos que van a pasar y en realidad construiremos algunos de estos patrones de diseño que también estás viendo aquí. Pero antes de que lleguemos, solo puedes ver cómo funciona una sombra dentro de la herramienta figma. Vamos a tirar de esto un poco. De acuerdo, así que voy a añadir un efecto aquí. Y tenemos nuestras gotas, sombra aquí. Aquí están las variables. Entonces aquí está mi x, aquí está mi y otra vez para querer hacer 55. Muy bien, así que tenemos nuestro eje x e y en marcha. ¿ Qué es lo siguiente que haces? ¿ Qué hacemos otra vez? Aire y se supone que debemos hacer borrón. Oh sí, así es, difuminar. Vamos a volar esta cosa. 35. Eso solo ya se ve realmente bien. Y luego otra vez, iremos agregando un poco de gris azulado a la sombra. Boom, ahí tienes, eso es genial. El gran look. Ashanti se acabó un poco esos bordes. Eso se ve bien. Vamos a ver la sombra interior. mismo tipo de principio aquí solo agregamos una sombra, Omeka, sombra interior. La única diferencia con las sombras interiores que quieres poco, no tanto desenfoque. El mismo principio sin embargo. 55 aquí, los bordes duros siguen apareciendo. Solo queremos suavizar esos bordes. Por lo general como 15 será bueno. No necesitas ir a como 35 porque lo que pasa es simplemente llena toda la forma. Apenas 15 es bueno. De nuevo, queremos hacer un poco de lo azul. Puedes añadir un poco de color aquí si así lo querías. Ahí vas. Esa es una bonita sombra. Genial. Entonces hay información sobre herramientas y sombras, y te veré en la siguiente clase. Hablaremos de miniaturas y carruseles. Nos vemos ahí. 14. Miniaturas y Carousels: Muy bien, Bienvenido a la siguiente clase. Vamos a hablar de miniaturas y carruseles. miniaturas son bastante simples ahí, hay pequeñas imágenes que dan a un usuario una visión general de múltiples imágenes. Es una especie de adelanto de lo que viene a continuación. También suelen estar emparejados con una imagen maestra más grande. Y cuando el usuario hace clic y toca o toca una miniatura, la imagen maestra entonces revelará aparecerá como la misma imagen, lo que estaba en la miniatura en ese punto. Por lo general, puedes marcarlos como unos 100 píxeles de altura por un ancho de 100 píxeles. Son realmente geniales para mostrar diferentes fotos de productos. También ayuda a cargar imágenes más rápido ya que el navegador no necesita cargar todas las imágenes de tamaño completo, solo puedo cargar las pequeñas miniaturas y solo cargar una imagen renderizada completa de tamaño completo. También es genial si los usuarios quieren. Permite a los usuarios navegar rápidamente a través de colecciones de imágenes. Y esto es muy similar a la fototeca de tu dispositivo móvil. Estas son todas pequeñas miniaturas aquí. Algunos lo hacen y no. Nuevamente, la miniatura debe llenar el espacio del mismo tamaño. Y se pueden ver los de aquí donde estas miniaturas no están llenando el espacio. Son sólo que podrían ser imágenes diferentes tamaños de algunos pueden ser horizontales. Formato de imagen, algunos pueden ser como versiones retrato u horizontal. Aquí se puede ver el paisaje de éste , el retrato de éste. Pero de nuevo, todos estos deberían llenar este espacio. Para que así tengas esta bonita imagen de campo, no tienes estos raros espacios blancos, inconsistentes. Se puede ver esto mucho. Realmente me gustan las miniaturas de Nike aquí. Ahí. Puedes tener un pequeño video de este tipo luciendo sus zapatos aquí. Y luego de nuevo, puedes hacer click en estas miniaturas a la derecha aquí, y se mostrará por aquí. Bastante genial. Creo que realmente buen trabajo de imágenes maestras y miniaturas pasando por aquí. Soy como el sitio web de Él. Pasemos a los carruseles. Entonces los carruseles lo son, casi permiten que múltiples piezas de contenido ocupen un solo espacio. El usuario se involucra mucho como una presentación, como me gusta, como una presentación de diapositivas. Y a veces un carrusel puede reproducir automáticamente, lo que realmente se ve como una reproducción automática de una presentación donde cada pieza de contenido se mostrará por un breve periodo de tiempo. Y luego otra pieza de contenido saltará por la misma cantidad de tiempo y se carrusel a lo largo de ese tipo de contenido. Es por eso que se llama carrusel. Es como un eres como si estuviera moviendo carrusel con caballos. Como uno. Cada cosa tipo de juega a la vez. Si quisieras hacer un sitio web como este donde tengas imagen aquí, imagen uno, un texto de llamada a la acción. Y luego esto permanece por un periodo de tiempo. Y luego entra otra imagen y tienes una imagen para, otra imagen se convierte en una imagen de ti planeas hacer eso. Detener. Sobre todo si esta es la imagen héroe de un sitio web. Definitivamente no hagas eso. Esta es una especie de anti-patrón para las células de cuidado. Entonces lo que queremos es tan pronto como un visitante acuda a tu página web, ellos deberían poder contar qué se trata tu negocio. Eso significa tener un solo mensaje claro y un pedazo de contenido que sea fácil de entender. Si estás reemplazando ese solo mensaje claro o contenido con múltiples ideas y mensajes, aumenta el riesgo de que la gente realmente entienda lo que hace tu empresa. Y peor aún, disminuirá tus tasas de conversión. Algunos lo hacen. Se puede utilizar cuando la información es simple y no requiere mucho enfoque. Nuevamente, nunca lo utilices para secciones de héroes. Pero puedes ver cómo lo hemos usado para un sitio aquí. Esto es lo que tenemos ahora para la sección héroe. Lo tenemos aquí para ti. Es fácil y rápido personalizar tu libro, subir tu libro y puedes hacer click en estos. Se quedará una vez que el usuario empiece a hacer clic. Haga clic en el modo ahora. Y creo que se quedará por tiempo y luego volverá a jugar auto. Sí, ahí tienes. Entonces otra vez aquí lo usamos para servicios creativos. Puedes ver esto muestra ilustraciones y edición de copias y diseño de portada de libro y servicios como ese. Sólo para felicitar nuestra comunicación por aquí. Puedes usarlo mucho para un carrusel sin el auto-play, que es más común. Y le das al usuario el control sobre él. Esto es lo que va a ver. Apple tiene uno bastante bonito donde muestran sus AirPods aquí. Y tienen esta pequeña paginación. Tengo toda una charla sobre la paginación. Al final de la clase a eso puedes chequear y hablaremos de esto. Pero ya ves que tengo una flecha derecha. Puedo decir que hay tres secciones diferentes en este carrusel. Cada tres tiene uno de estos tiene tres productos. Así que estoy asumiendo que va a haber nueve productos en total dot con esta paginación. Y puedo volver atrás, puedo seguir adelante. Oye, mira, sólo hay uno aquí. Pero esencialmente este es el carrusel. Es sin la reproducción automática dando el control del usuario. Colas, eso es lo que tenemos aquí. Dar lo puedes combinar con miniaturas es como quieras golpear las miniaturas. Y luego también tienes control de usuario aquí, estas flechas para ayudar a voltear a través de cada una de estas miniaturas. Aquí es donde la reproducción automática es genial. Si vas a servicios de televisión inteligente, tienen carruseles. Verás esta imagen de héroe aquí, la paginación. Van a haber cinco de estos. Y esto se reproducirá automáticamente. Usted tipo de ver como entran estas nuevas series. Ten cuidado con tu reproducción automática, no debería, no debería ser demasiado rápido. Sólo un tiempo suficiente para que el usuario obtenga el punto. Y luego entra el siguiente. Sí, este patrón de diseño, aunque no funciona, no funciona para sitios web, como lo es el objetivo de comunicación, se vuelve inconsistente porque sigue encendiendo al usuario. Pero cuando estás en Modo Browse viniendo a tu televisión y quieres ceder algo. Aquí es donde ayuda. Aquí es un buen patrón. Está bien, genial. Eso fueron miniaturas y Carruseles. Te veré en la siguiente, hablaremos de modales y cajas de luz. Nos vemos ahí. 15. Modales y cajas de luz: Muy bien, hablemos de modales y pop-ups. Un modal o un pop-up es un elemento de ventana que se encuentra en la parte superior de una pantalla de aplicación. Y crea un modo que desactiva la pantalla principal, como la pantalla de los padres, pero mantiene visible la corriente principal en segundo plano. Al ver fuera de la ventana modal, los usuarios deben interactuar con este modal antes de que puedan volver a esa pantalla principal o a la pantalla de padres, ya sea haciendo clic o tocando fuera de la modal y cerrando el modal. Y de nuevo, se remonta a esa arquitectura básica de la información, ¿verdad? Donde tengas ese nivel padre, que es la pantalla principal, y luego tienes ese nivel hijo, que es el modal o el pop-up. Su principal valor es que permite a un usuario ver fácilmente contexto adicional, nuestro contenido, sin perder el contexto de la pantalla principal. Eso tiene que ver mucho con la ubicación. Al igual que llegan a ver información adicional, pero no pierden el contexto de su ubicación actual. El estafador de modales es que pueden ser muy intrusivos. Y en su mayoría se garantiza que su usuario verá el modal, pero se asegura de usar para algo que sea valioso y no publicitario. Agregar pop-ups intrusivos que salen de la nada pueden interrumpir enfoque de los usuarios y crear desconfianza en su producto o UX. Déjame mostrarte una aquí. Aquí hay una especie de lo que estamos hablando. Estaba en este sitio aquí solo mirando a su alrededor, leyendo artículos de noticias todo el día y esta cosa simplemente aparece de la nada para un histograma videos tutoriales. Like No, soy bueno en tutoriales de Instagram. Es intrusivo, definitivamente se queda ahí. Tengo que interactuar con esto. Y voy a seguir adelante y cerrarlo y volver a mi material de lectura aquí. Te veré más tarde. Sólo bromeando. De acuerdo, Así que eso es una especie de lo que quieres evitar, ese tipo de anuncio modal como aparecer. Yo también pensé que esto era gracioso. Esto fue como, Aquí está el Sol y aquí está el mercurio. Y luego aquí está mi dedo. Y aquí está el botón Agregar ropa, como todos hemos visto en esos modelos, el anuncio, pero el botón cerrar es así, tan pequeño que apenas se puede meter mi dedo en él. Pero eso eso fue un poco gracioso. Muy bien, así que hablemos de cuándo usar aquí un modal. Por lo que es genial cuando capta la atención del usuario. Así que úsalo cuando quieras interrumpir la tarea actual del usuario y captar toda la atención del usuario por algo súper importante. Digamos que necesitas la entrada del usuario. Esta es la forma de obtener información de tu usuario, como en este ejemplo donde estás listo para comprar un artículo, haces clic en el botón Checkout, y luego aparece un móvil, un modal pidiéndole que registres en con sus campos de correo electrónico y contraseña y formulario. No pierde la ubicación del usuario. No se fueron a otra navegación o destino en el sitio. Probablemente también querrás agregar like, no tengas una cuenta de registro o invitados continuos también. Es genial si quieres mostrar información adicional sin perder el contexto de la página principal. lo que un ejemplo aquí es mostrar imágenes más grandes, hacer clic en una imagen y verla más grande o hacer clic en un video, diciendo que el video muestra información adicional como Aprender más o FAQs Preguntas Frecuentes. Puede mostrar información que no está esencialmente directamente relacionada con la página principal. Cosas como notificaciones o oportunidades de marketing como invitar a cinco personas y ganar $500 o Bienvenido contenido o incluso compartir funcionalidades. Entonces podrías mostrar, usa el modelo para mostrar información que está directamente relacionada con la página principal. Cosas como un mensaje de éxito o errores de carga. O si vas a hacer click en algo que sea impactante por parte del usuario, podemos lanzar un Ru seguro. Y pueden elegir sí o no, o tienes algo que acaba de pasar en nuestra base de datos mientras tratabas de editar algo o hacer algo, podemos lanzar un modal hasta solo dice, tú saber, algo salió mal. Es posible que tengas que refrescar o cerrar el modal y empezar, volver a empezar porque nuestro centro de base recibió la información, cosas así. Un par de ejemplos aquí, sólo voy a mostrarte el ejemplo en vivo para este modal aquí. Esto es para un sitio en el que trabajamos, y eso es bastante genial. Como usuario, puedes ir y hacer click en, estas son para baterías domésticas. Estas baterías cargarán tu hogar y suministrarán energía a tus hogares. Como usuario, puedes pasar y hacer clic en qué tipo de electrodomésticos querrías que se alimente esta batería si estuvieras en un corte de energía. Y luego puedes ver que te muestra cuántas horas una batería podría cargar tu casa si tuvieras todos estos electrodomésticos encendidos. Ya que estamos educando a un usuario sobre el uso de energía, uso doméstico y los electrodomésticos y la cantidad de energía que utilizan. Agregamos aquí esta pequeña carta energética que abre un modal. Ese modal es una información de nivel hijo que se relaciona con el padre. Y esto muestra información sobre qué tipo de electrodomésticos causó la más utilizada la energía, y lo que eso equivale a también como una factura de electricidad más alta. Entonces si estás manejando una C todo el día o autos eléctricos y luces, esos contribuyen mucho a un mayor consumo de energía. Nuevamente, el usuario puede simplemente cerrar esto. Volver a la página principal. Entonces ese es un buen caso de uso para un modal. Otra en la aplicación en la que trabajamos es en este laboratorio móvil. Si se trata de una app que monitoriza tu sistema solar en tu hogar. Y si algo sale mal en el sistema solar, aquí abanderamos una pequeña advertencia que se puede ver como un signo de exclamación y una pequeña burbuja de altavoz. Y si el usuario toca ese modal, solo les dejamos saber que pasó algo y que deben contactarnos para que podamos analizar el tema. También sé que es bueno poner la x para dispositivos móviles en la parte superior izquierda, especialmente para las personas que son diestros porque estarás sosteniendo tu teléfono aquí con la mano derecha y puedes usa tu mano izquierda para controlar fácilmente eso, para cerrar esa x. esa es una colocación bastante común para la x. Si estás en un dispositivo móvil y puedes ver este en acción aquí. Aquí mismo. El usuario hace clic en este signo de exclamación aquí. Verás entrar en juego el modal y luego puedes cerrarlo aquí también. Ejemplo tan bastante simple de eso, como boop, algo salió mal. Inténtalo de nuevo. Y también puedes usar para dispositivos móviles y en tablet y web, puedes hacer lo que se llama modal de pantalla completa donde lleva toda la pantalla. Y así el usuario no ve la página principal en segundo plano, solo ven la X. Y si te has dado cuenta, mira si tienes algún dispositivo, las pantallas nativas de notificación, esos son modales como este es un modal también. Aquí hay un ejemplo de algo que no necesariamente ata a la página principal. Contamos con un sistema de referidos y una de las aplicaciones que somos para las que gestionamos y diseñamos. Y si puedes referir a la gente al servicio, y si alguien realmente se inscribe y completa su proyecto, entonces ganarás $500. Y así esta voluntad modal, se mostrará en cualquier momento durante la experiencia del usuario. También desencadena un correo electrónico a un usuario, pero si pueden venir desde el correo electrónico, pero también se mostrará si solo estás en la aplicación haciendo algo, esto simplemente se disparará y es intrusivo. Pero mira cómo eso es un gran intrusivo. Es como si acabaras de conseguir 500 dólares, como seguir adelante y reclamar tus ganancias te iban a enviar un cheque por 500 dólares. Este es un ejemplo aquí de una RU. Seguro. Si eliminas una cuenta aquí, vas a eliminar mucha información que vincula a esa cuenta. Y despedimos esto para simplemente eliminar accidentes por algo impactante. Si eres usuario y fuiste a ir a hacer click en algo y eliminarlo. Simplemente vamos a dar un paso más adelante en algo que esté relacionado con la cuenta y solo hágales saber, como ¿estás seguro de que realmente quieres eliminar esta cuenta? Hay mucho trabajo, muchos reportes ligados a esto. Y de nuevo, si fue un accidente, pueden cancelarse. Si se trata de una eliminación, pueden eliminar. Aquí hay uno que se vincula a la página de nivel padre. Aquí está editando la información de nivel de su cuenta. Pulsa el botón editar muestra un modal, ingresa la información de la cuenta. Y estos son geniales porque tu bifurcación en tu usuario, estás diciendo que o bien vas a actualizar esta información o vas a cancelar o cerrar. No hay otra forma de salir de esto. No puedes estar a medio camino y luego ir a otro lado. Como si tuvieras que terminar o completar. Y eso es lo bueno de estos modelos para, como realmente lo hace, bifurcar a tu usuario para que vea este modal y luego bien completando la tarea o cerrando la tarea. Personalmente me encantan los modales de búsqueda de pantalla completa. Si hace clic en el icono Buscar aquí en este sitio, se abre un modal de búsqueda a pantalla completa. El fondo es un poco más oscuro. Es alrededor del 90% de opacidad. Todavía apenas se puede ver la pantalla de los padres detrás de ella. Pero es súper elegante porque se siente como si estuvieras, te estás involucrando dentro de la interfaz, como si estuvieras, estás en la interfaz y no se siente pequeño o débil, realidad se siente súper moderno y resbaladizo. Y a medida que estás escribiendo en el campo de búsqueda aquí verás resultados de búsqueda. De nuevo, puedes cerrar esto con la x o puedes ir a encontrar tus resultados de búsqueda como Erin Anderson aquí e ir al sitio de Aaron Anderson. Personalmente me encantan estos. Creo que estos son grandes y grandes casos de uso para modales de pantalla completa. Vamos a meternos en algunas cosas y no. Por lo que de nuevo, un modal a la vez. Y esta es una regla muy difícil para que las aplicaciones no hagan modales encima de modales como este aquí. Como si tuvieras aquí un modal y tienes un modal aquí, eso no está bien, Eso no es Bueno. Está bien. Si tienes como sistema operativo como yo estoy en mi computadora, podría entrar en mi buscador. Eso es técnicamente un modal. Tengo otra como esa está bien cuando estás haciendo un sistema operativo como una computadora como esta. Pero para las experiencias de software y de usuario, evite estas. Otra que vi aquí está en mi solicitud de crédito. Y voy a ver mi reporte crediticio y recibo notificaciones como tu puntaje crediticio bajó sin razón aparente, que soy como, ¿Qué hice? Yo incluso hago cualquier cosa y va abajo. Pero se puede ver lo que pasa aquí. Dice ver tu nueva puntuación y se abre un modal. Este es un modal. Y hago clic en la X y me cierra y se remonta. Y si agrego toque a esta pequeña cosa de tres puntos, mira lo que pasa. Abre otro modal encima de un modal. Ahora estoy mirando a dos Xs y me gusta, bueno, ¿ cuál es la x? Entonces esto es lo que se quiere evitar este modal sobre interacción modal. Recuerda como los modales son geniales, solo hacen nivel de padres y nivel hijo. No se puede lanzar otro modal encima de esto para hacer un nivel nietos de arquitectura de la información. Pero están muy bien para esta relación de nivel padre e hijo. Al igual que el 70 u 90% de opacidad para el color de fondo aquí puedes ver y evitar hacer como muy baja opacidad de fondo, como quieres que el usuario se centre en la tarea que nos ocupa. En este caso, estoy dando, dándonos retroalimentación en la aplicación. De esta manera No hay enfocado, hay, no hay suficiente capacidad. hay demasiada capacidad en Aquíhay demasiada capacidad en el color y el fondo, y está pasando mucho. No es crear el foco que necesitamos para un modal. También modal debe caber en la pantalla, principalmente para escritorio. Y puedes desplazarte dentro de este modal. Como si pudiera meter mi ratón y desplazarse por esta información. No hago el modal demasiado tiempo que salga por la ventana aquí, ¿verdad? Al igual que quieres poder encajar directamente en la ventana de tu aplicación de escritorio. Bien, vamos a ver cajas de luz. Las cajas de luz son más o menos la misma interacción que un modal, las diferencias que la caja de luz refiere a una galería de fotos. Es todo lo que necesitas saber. Los mismos principios se aplican a los modales así como a las miniaturas que se aplican a la caja de luz, ¿verdad? Entonces déjame mostrarte un ejemplo de eso. Entonces si recuerdas, tenemos este lado en el que trabajé y construí. Tenemos estas miniaturas, ¿verdad? Por lo que las mismas reglas que se aplican a esas miniaturas hablan que sí aplicamos a estas miniaturas. Y cuando veas entrar la caja de luz, puedes ver que es más o menos un modal. Y la diferencia es que tiene alguna más funcionalidad construida dentro de él. Todavía puedo cerrar esta imagen. Aquí es una imagen bonita. Pero puedo navegar de ida y vuelta a través de estos modales. Y la caja de luz es más o menos eso, Ese es el término se usa solo para el modal. Es como crear una caja para ver tu imagen. Y el fondo sigue siendo visible desde la galería aquí, pero es esencialmente la caja que sale de la luz. Estás viendo tu imagen y luego la vuelves a poner en la galería de fotos aquí cerrándola. ¿ Cuándo utilizas estas? Usa si tienes muchas fotos para caber en una página, de nuevo, son geniales para mostrar diferentes tomas de producto como un sitio de comercio electrónico o una fototeca y aplicaciones que se integran con tu cámara fototeca fotográfica. Este sitio aquí fue más para un fotógrafo. Y puedes ir a comprobarlo aquí. Aquí está la URL también si es necesario. Sí. Así que solo recuerda dentro del lightbox modal, puede haber descripciones como acabamos de ver. Puedes hacer que el pitcher cuente aquí, ocho de 25. No se puede tener una descripción también. No es obligatorio. Puedes moverte hacia adelante y hacia atrás en los botones. Puedes cerrarla. Recuerda que los botones tienen un estado de flotación también. Se puede ver aquí. Puedes moverte a través de esas fotos. Está bien, genial. Si eso fuera modales y pop-ups, y te veré en el siguiente video. Hablaremos de menús y cajones. 16. Parte 1: menú y cajones: Muy bien, hablemos de menús y cajones. Los menús son una lista de contenido, categorías o características que normalmente se presentan como un conjunto de enlaces dentro de la barra de navegación, se fueron en la web, o se pueden agrupar dentro de un icono como una hamburguesa o un kebab cuando están encendidos dispositivos móviles y tabletas, te mostraré un montón de ejemplos de esos. Los menús son patrón UX de prioridad súper alta porque ayudan a los usuarios a navegar a lo largo su experiencia de usuario de servicio o aplicación. Y de nuevo, puedes tener las características más valiosas, contenido más convincente, es impresionante, pero es inútil si la gente no lo encuentra. Menús o fuente allí. Tan importante que los encontrarás en cada página web, cada pieza de software que alguna vez contrarrestarás. Es muy crítico entender cómo funcionan estos menús. No sólo para software y aplicaciones, sino para sitios web receptivos. Ahí es donde realmente les resultan útiles, y ahí es donde este combo de menú y cajones realmente son útiles es para sitios web receptivos que les tienen cierta mirada en la web, y luego responden para adaptarse a su contenido y sus necesidades de navegación para aplicaciones húmedas, para móviles y tabletas. Déjame mostrarte un rápido ejemplo de eso. Así que aquí está el sitio web de Nike, aquí está su menú para dispositivos de escritorio web. Y se puede ver esto es todo lo que va a cambiar cuando vaya a la tableta. Y se puede ver que usan el menú de hamburguesas aquí. Y luego cuando voy por aquí a un dispositivo móvil, usan el menú de hamburguesas para albergar ese tipo de información. Ese es un sitio web receptivo. Y de nuevo, el cajón es el más utilizado para cómo los diferentes elementos como los enlaces de menú. Pero también se puede utilizar para ayudar a otros, cómo es otro tipo de información y UI y contenido que se relaciona con la aplicación. Nuevamente, el cajón es este almacenes todos los enlaces. Tienes aquí el ícono Menú, y luego tienes este cajón que se desliza así. Y para que cajón, Es genial albergar navegación, menús y enlaces, pero también se puede utilizar como una interacción separada para mostrar información de nivel hijo basada en cualquier contenido o acción que tenga un usuario hecho en su sitio. Te mostraré ejemplos de cómo simplemente usar el cajón. Pero verás esto mucho como un combo. El menú y el combo cajón. Nuevamente, ese cajón se refiere de nuevo a cajones de tocador. El cajón del aparador aquí alberga información la puedes abrirla y cerrarla. De ahí vienen los orígenes del cajón. Aquí está nuestro menú de navegación aquí para web, tenemos nuestras cuatro opciones para nuestro usuario. Tenemos nuestra barra de búsqueda. Entonces se podía ver el mismo estilo de navegación aquí. Para aplicaciones móviles donde ponemos el menú o el menú de hamburguesas arriba. Y albergamos todos los enlaces y necesidades de navegación dentro de ese menú de hamburguesas. Aquí está el ejemplo donde los menús en la parte superior derecha. Y te mostraré algunos ejemplos aquí, aquí en un segundo cómo funciona esto. Aquí hay un ejemplo del menú de hamburguesas de la izquierda. Entonces aquí está el ejemplo del cajón de pantalla completa que entra en su lugar que el usuario puede X fuera en cualquier punto. Vamos a ver esos muy rápido. Aquí está el que está a la izquierda. Se puede ver esa diapositiva de cerca. Golpeas fuera de este cierra. Aquí está el que está a la derecha. Y toca en. Éste viene de la derecha. Si tus menús a la derecha, asegúrate de que venga desde la derecha. Eso está a la izquierda. asegura de que el cajón entre por la izquierda. También tenemos la pantalla completa aquí. Para que puedas ver cómo se lleva la pantalla completa. Entonces tendremos que tener una x aquí porque tenemos que tener una forma de que nuestro usuario salga. También pueden tocar en la pantalla de inicio. Haría eso también. De acuerdo, así que vamos a ver mucho de este menú y navegación y cajones. Tienen mucho que ver con arquitectura de la información y entender qué niveles de información para los que estás diseñando y qué niveles de navegación van a necesitar para pasar tus usuarios en todo su sitio web, su aplicación web, o su aplicación móvil y tableta también. Puedes ver aquí con página web de Nike aquí es que tienen este nivel de padres. Nuevos lanzamientos, hombres, mujeres, niños, y vender. Esa es la información de nivel de padres. Entonces se pudo ver aparecer el menú desplegable y esto tiene el nivel hijo y el nivel nietos. Esto también se refiere, como lo llamamos como un mega menú. Es como un enorme menú lleno de muchas cosas. Se puede ver que el nivel padre fueron los nuevos lanzamientos, el nivel hijo era nuevo y destacado. Y luego tienes el nivel nieto, todas las cosas que se relacionan con lo nuevo y característica y destacado. Se puede ver cómo funciona esto para un dispositivo móvil. Tienen el ícono de la hamburguesa, abre la información a nivel de padres. Y luego si toca nuevos lanzamientos que van a la información de nivel hijo, y luego se sube a la información a nivel nieto. Están usando un cajón, pero se puede ver lo flexible que es este cajón. Puede tener múltiples niveles de contenido dentro de este cajón. También puedes hacer clic o pulsar sobre el logotipo. En muchos casos se utilizará para permitir que su usuario regrese a la pantalla de inicio o a la pantalla maestra. Vamos a ver eso en vivo. Entonces antes de entrar en el siguiente ejemplo, así que aquí está tu nivel de padres, nietos, nivel hijo, y puedes ver cómo esto cambia en base la receptividad o adaptatividad de este sitio web. Así que ahora estamos en modo tablet, y ahora vamos a meternos en lo no modal. Haga clic aquí nuevos lanzamientos. Ahora estoy a nivel hijo y ahora conocí ese nivel de nietos y puedo volver atrás, atrás y cerrar. Muy bien, tan bastante efectivo, simple pero efectivo. Puedes ver otro ejemplo aquí de un menú que se usa comúnmente, que es el menú del cajón de la derecha. Se puede ver en Web no ocultamos toda esta información dentro de un menú de hamburguesas. Lo exponemos. Y lo mismo en la tableta. Está expuesto aquí a la izquierda. Y luego cuando llegamos a la vista móvil, en realidad usamos el menú, la hamburguesa, el ícono del menú, y el combo de cajones, ¿verdad? Entonces si tenemos los inmuebles en la web, no muestres el menú de hamburguesas, como mostrar toda la información porque vuelve a esa declaración , user affordance. Cuantos menos clics y toques se necesita para que alguien haga algo y complete su tarea en su sitio web, mejor. Vamos a ver a Shopify como ejemplo. Para que puedan ver su menú aquí a la izquierda, voy a exponer para web, se llega a la tableta. Nada cambia. Entonces nos metemos en la vista móvil y aquí está su combo de cajones de menú de hamburguesas, ¿verdad? Genial. Gracias. Consigue la foto. Vamos a ver diferentes tipos de menús. Se puede ver aquí está en Android tiene dos menús muy comunes. Cuenta con el menú de hamburguesas. Y de nuevo, esas casas de hamburguesas dominaron navegación como los enlaces de navegación a nivel padre. Entonces tienes lo que se llama el kebab o el menú de desbordamiento. Y este menú suele estar destinado a albergar las acciones que aquí no caben en esta barra de título. Entonces como acciones, a medida que esta barra de título se hace más pequeña y más pequeña, el desbordamiento, que es exactamente por lo que lo llaman desbordamiento. Cualesquiera que sean los menús que se desbordan se meten en esto. Nuevamente, esta interacción kebab aquí es común en Android, pero no es demasiado común en las interfaces de Apple o los productos Apple. Algunos otros comunes solo obtienen el menú de hamburguesas porque parece una hamburguesa. Aquí tenemos el menú de Bento. Esta se ve como una caja de bento, y esta suele ser la muestra diferentes aplicaciones que tienes como empresa. Al igual que si tienes Google, tienes muchas aplicaciones diferentes como Drive y Google y calendar. Por lo que esto muestra diferentes aplicaciones dentro de un servicio. Tienes el menú de kebab porque esto parece un barco Khabbab. Y luego tienes aquí el menú de la bola de carne porque parece bolas de carne. Y por lo general éste es más para los ajustes y en el menú kebab es más para el desbordamiento. Las secciones también se pueden utilizar para configuraciones. He visto también usar el menú de desbordamiento para la configuración. 17. Parte 2: menú y cajones: Se puede ver cómo se utiliza este tipo de cosa de menú de bento box en diferentes tipos de productos para mostrar sus aplicaciones, ¿verdad? Por lo que verás esto un Microsoft Outlook. Si hace click en ese menú de Bento aquí, se muestran todos sus productos que ofrecen, Outlook y PowerPoint, viejo PowerPoint y Word y Excel y algunas de las otras cosas allí. Y luego lo mismo con Google que tiene el cuadro Bento aquí en la parte superior. Y si hace clic en el menú de la casilla Bento tipo de cosa, se mostrará todas sus otras aplicaciones. Tienen YouTube y calendario y algunas otras cosas. Quiero mostrarte un pequeño consejo realmente súper valioso que puedas. Puedes usar cajones para, eso. Puedes albergar más que solo opciones de menú y cajones cuando estés pensando en un sitio receptivo. Cajones o tu mejor amigo. Son super, super geniales. Son realmente útiles. Y señalaré por qué aquí una vez te dé este ejemplo. Entonces aquí hay un ejemplo donde tenemos una interfaz de mapa y el usuario toca este hito específico aquí. Y abrimos un cajón. Más detalles relacionados con lo que el usuario acaba de mirar. Presionan la X y los lleva de vuelta al mapa. Ahora vamos a ver esta interacción desde un iPad. Mismo trato aquí el usuario toca el mapa aquí, ve esta información relativa aparece. Es la misma interacción que la web. Simplemente se necesita tal vez un poco más bienes raíces de lo que haría en la web. Este cajón aquí, y se puede cerrar, todavía funciona. Es una gran interacción y mantiene al usuario enfocado. Y luego se puede ver cómo funciona la misma interacción para el caso móvil. Pulsas en este artículo aquí en el mapa y se lleva la pantalla completa inmobiliaria, puedes cerrar con la X y volver. El beneficio de este sistema usando cajones es que este modelo de interacción funciona igual y es la misma funcionalidad, ya sea de escritorio, tableta o dispositivos móviles. Entonces lo que eso significa es que puedes diseñar esta vez, y funciona para los tres tipos diferentes de plataformas. Este modelo de interacción funciona muy bien para todo. Vamos a mirarlo en acción aquí en un producto real. Aquí hay un producto solar en el que estamos trabajando. Estos son su cliente, estos son sus paneles solares aquí en azul. Y si quieres aprender un poco más sobre tu panel, escuchar o ver la producción de ese panel solar, toca en él. Lo destacamos y vomitamos un cajón. Y el cajón aquí tiene la x, puedes cerrarla. Y luego se ve información relacionada con esa área específica de un panel específico aquí y panel solar que tocaron. Ahora vamos a ver eso en el iPad. Misma funcionalidad. Toca el panel solar, consigue el cajón. Puedes deslizar en este cajón, puedes ver más información relacionada con él. Entonces puedes ver lo mismo aquí. Ser utilizado para la aplicación móvil. Toca en el cajón, da el cajón modal de pantalla completa aquí el cajón modal de pantalla completade pantalla completa y lo cierra. Muy bien, Así que esa es una gran relación de nivel padre-hijo. Y el beneficio también es que los cajones, A diferencia de los modales, no se puede tener un modal. En un modal. Los cajones pueden tener más información dentro de ella. Se puede ver este aquí tiene, estamos usando acordeones dentro de este cajón aquí para nuestras preguntas frecuentes son preguntas frecuentes. Entonces estos son grifos, esto que abre la respuesta a esta pregunta, ¿verdad? Entonces entonces tenemos tres niveles de arquitectura de la información. Tenemos la pantalla de nivel padre, tenemos la pantalla de nivel hijo para este cajón, y tenemos aquí la pantalla a nivel nieto para el acordeón dentro de este cajón. Se puede ver que es un modelo de interacción e interacción muy práctico e inmobiliario de UI para diferentes tipos de necesidades de arquitectura como esa. Vamos a entrar en las mejores prácticas aquí. Así que recuerda poner los menús en la parte superior porque encajan a nivel global o maestro de arquitectura de la información. Estos, este menú navega por todo el sitio por lo que demandan el espacio que normalmente deben estar en la parte superior. Además los usuarios solo están acostumbrados a ver estos ya sea en la izquierda o en la derecha de las barras de navegación. Y luego dígale a tus usuarios dónde están cuando se van a diferentes partes de tu UX. Podrías usar la sección de título en tu barra de título aquí para mostrar y resaltar las secciones del menú están en. En escritorio. Tenemos un estado activo para el menú. Esta es la mercancía para el hogar. Y luego para móvil, verás que el usuario entra en el menú, puede tocar artículos para el hogar, y usaremos el título aquí para recordarles dónde están. Recuerda mantener el menú fijo como si se queden en un solo lugar cuando el usuario se desplaza. Hace que sea fácil para el usuario ir y navegar fuera de cualquier situación o cualquier destino en el que se encuentre y no tenga que ir todo el camino de regreso a la página. Entonces no te olvides de cómo va a volver tu usuario a la pantalla de inicio. Si no tienes casa en tu cajón y el usuario se mete como joyas aquí. ¿ Cómo volvieron a la pantalla de inicio? Ya no tienes el logo porque reemplazamos el logo por el título. Recuerda ese tipo de interacción aquí. Y si necesitas agregar la pantalla de inicio, agrega la pantalla de inicio y lleva al usuario vuelta. Te vendría bien eso. Recuerda ese combo de cajón de menús, menú desplegable combo aquí para adaptarse a las necesidades de navegación padre-hijo y nieto. Podrías usar lo mismo para dispositivos móviles que vimos. Nuevamente, piensa en estos mega menús aquí, como artículos para el hogar como el padre, tienes almohadas, arte, estampados, relojes, relojes de pared, mantas como estas se relacionan con los artículos para el hogar como el nivel infantil. Y luego estamos en almohadas aquí vemos un montón de almohadas. Ese nivel de nietos. Vimos lo mismo para Nike. Para sitios web receptivos, si solo tienes tres o cuatro enlaces de menú para tu dispositivo móvil. Aquí tenemos como ropa y joyería y artículos para el hogar. Podemos cambiar a una barra de pestañas secundaria en lugar del ícono del menú de hamburguesas. Y de nuevo, esto tiene que ver con pagar pulgada. Al igual que estos menús ahora están expuestos y el usuario puede con un toque, navegar fácilmente por los tres de estos menús o elementos de destino versus tener que volver a un menú, seleccionar el elemento y el menú fuera. Si solo tienes 234 tops de estos, puedes usar la barra de pestañas siempre y cuando encaje. De acuerdo, entonces si tienes para web y tienes los inmuebles exponer todas tus necesidades de navegación. No hay necesidad de un menú, un ícono de hamburguesa en la web aquí. Simplemente se puede ver si tiene el inmueble. Si tienes el inmueble, ve a sacar todos estos artículos del menú de hamburguesas y ponerlos aquí para que el usuario no tenga que hacer clic varias veces en esas necesidades de navegación. Cuando salieron estos menús de hamburguesas por primera vez. Esto es alrededor cuando acaba de lanzar el iPhone. Hubo mucho retroceso con la comunidad UX sobre el uso de estos menús de hamburguesas. Y lo que fue es que no fue que no sean súper valiosos. Ya verás, puedes verlos obviamente en todos los servicios más comunes y grandes aplicaciones que usamos, fue que se estaban utilizando mal así. La gente solo los usaba cuando obviamente tenían el inmueble para toda la información aquí. Entonces de ahí es un poco de donde vino todo eso y la contragolpe. Pero aún así hay un papel esencial para navegar y destinar a las personas a lo largo de su sitio web. último pero no menos importante, recuerda si tienes un elemento de menú a la izquierda, abre el cajón desde la derecha o desde la izquierda también, donde las puertas están abiertas, donde esté el menú. No hagas esto. Donde entran los menús la izquierda y el cajón de la derecha. Está bien, genial. Eso es menús y cajones. Os veré a todos el siguiente video. Cubriremos magos, migas de pan y paginación. 18. Hechiceros: Bienvenido a magos, pan rallado y paginación. Voy a romper este en tres videos diferentes. Haremos un video por cada uno de estos temas. Entonces empecemos con Wizards. Un Asistente de formularios es un patrón de diseño de interfaz de usuario que permite a los usuarios no capacitados o nuevos alcanzar un objetivo a través de una serie de pasos. Y el usuario ingresa información en cada paso y luego pasa al siguiente paso hasta las terminaciones. Y los magos ayudan a romper lo que podría parecer una larga tareas desalentadoras para completar en orden en pequeños pasos digeribles. Y los estudios han demostrado que si hace el primer paso del asistente sea fácil de completar, es más probable que el usuario complete todos los pasos en su tarea. Puedes ver aquí tenemos la solicitud de chequeo de crédito aquí. Nuevamente, lo hicimos realmente fácil para el paso de revisión. Lo agregamos bastante simple para el paso de divulgación. Y luego hicimos la verdadera carne aquí está en tu info. Tenemos que poner algo de información para ejecutar este cheque de crédito. Y entonces también es bueno hacer los últimos pasos súper fáciles también. No quieres que la gente se caiga cuando se pone, ya han pasado por tres pasos cuando llegan al último paso, si es aún más información de la que podrían, podrías arriesgar el riesgo de ellos cayendo en ese punto porque son como, simplemente no quiero seguir haciendo esto. El primer paso super fácil de hacer el último paso súper fácil como el mejor enfoque aquí. Esta es una interacción realmente buena, no sólo para romper largo proceso desalentador hasta los pequeños pasos del tamaño de un bocado. Pero los magos también transmiten tres cosas muy importantes que son fundamentales para la experiencia del usuario. Lo primero es la expectativa. Da un alto nivel de cómo se ve todo el proceso, así como cuántos pasos hay. Y le da a esa segunda parte ubicación correcta mientras que el usuario en, en estos pasos y en cualquier momento durante este proceso, entonces también les permite ver el tiempo. Entonces, ¿cuántos pasos o menos, o progreso, cuántos pasos has completado y cuántos quedan? Cuándo utilizarlos, utilízalos cuando tu usuario necesite realizar una tarea o un objetivo que tenga mucha información, acción o entrada de datos. Nuevamente, estas tareas son más fáciles de lograr dividiendo este proceso en pasos más pequeños y poco simples. Y un ejemplo es como llenar información fiscal que requiere mucha información. Y esa información debe agruparse en diferentes categorías, secciones como información personal, información empleador, información financiera. En pasos de confirmación ahí. Use esto cuando el usuario necesite orientación, el usuario quiere lograr un objetivo general, pero puede no estar familiarizado con los pasos necesarios para alcanzar cada uno de estos objetivos son información. El ejemplo fiscal es genial porque impuestos, hay gente que todo su trabajo es hacer los impuestos de la gente porque es complicado, ¿verdad? Por lo que estas son grandes formas de romper esa complejidad en pasos y guiar a tu usuario a través de cada paso sin sentir que necesitas saber todo a la vez. Cuando cierta información o categorías de información son dependientes unos de otros. Por lo que en el caso, si la información necesita ser revisada o comprobada en cada paso para recibir un resultado final. Entonces esto es genial cuando tuvimos un running para este modelo aquí a la izquierda donde tuvimos que usar esto para un cheque de crédito aquí. El motivo por el que lo separamos en un mago es que los usuarios, antes incluso de obtener información de ellos, tienen que aceptar nuestros términos y condiciones que vamos a utilizar su información para ejecutar un cheque de crédito, golpear a la oficina de crédito y obtener un cheque de crédito para ellos. Antes de que hasta consigamos su información. Por ley, necesitamos que estén de acuerdo con estos términos. Y luego segundo, obtuvimos la información y luego el tercero es el resultado de la verificación de crédito. Al igual que la mayor parte del tiempo se aprueban, pero a veces son rechazados. Se puede ver que la segunda parte aquí es cuando la teníamos, enviar esa información rápidamente a nuestra base de datos, ejecutar la verificación de crédito, y luego devolver el resultado. Por lo que el tercer paso depende del segundo paso. También son geniales para flujos de embarque a bordo donde los usuarios necesiten ingresar un conjunto de información para comenzar a usar tu aplicación como nombre de usuario o perfil pick o seleccionar categorías de intereses, que tipo de cosa. Vamos a ver unos pasos para crear un buen mago aquí. Así que lo primero que vas a querer hacer es desglosar toda la información que necesitas para tener la entrada del usuario. Y nuestro selecto, vamos a usar este ejemplo de helados, como definitivamente sabemos que la gente quiere, necesitamos que la gente seleccione su tamaño de helado una cucharada para sacar, tres palas de hielo Sabores de crema. Aquí obtenemos las páginas de chocolate, chocolate chip, el pinup, camino rocoso, luego información de pago de rehabilitación , dirección de entrega de nombre, teléfono o número de tarjeta de crédito, fechas de vencimiento, número CVE y dirección de facturación, correcto, así que eso es más o menos va a completar parte de nuestro flujo de trabajo aquí. De acuerdo, entonces querrás que encuentre el orden de jerarquía de información que, que coincida con el modelo mental actual del cliente. Esto es realmente agudo. Entonces el modelo mental es una comprensión de cómo un usuario ordena u organiza información o sistema. Muy a menudo este modelo viene como un artefacto o un resultado de hacer investigación de usuarios. Y así cuando piensas helado en el sistema actual o convención y forma en que las personas mentalmente modelan u organizan información de helados. Los usuarios tienden a entrar y primero ordenan tamaños de helado. ¿ Cuál es el tamaño? No comienzan con coberturas. Para que puedan ver ese orden sucediendo ahora. Empiezas con el tamaño y luego lo haces los sabores. Y entonces usted puede obtener el tamaño determina cuántas palas que se obtiene. Y luego el número de palas determina cuántos sabores obtendrás. Y luego a base de esos sabores, es posible que desee ciertos coberturas. Se puede ver que eso es un modelo mental. Así es como tu cliente piensa u organiza esta información. Y yo realmente buen libro aquí es, si vas al diseño de Everyday Things de Don Norman aquí, él habla mucho sobre modelos mentales en este libro. Y es super bueno. Si quieres conseguir realmente, si eres de todos modos, hacer UX o UI como esta es una lectura fundacional aquí. Entonces, si no lo has leído, solo recíbelo como un gran libro. Habla mucho de puertas, uno de mis capítulos favoritos y acaba de ir, simplemente se vuelve loco en diseño de puerta y cómo diseñas manijas para informar a la gente como de qué manera abres una puerta que empujar o tirar, Eso depende del diseño del mango versus un letrero. Tan muy, muy interesante. Buen libro aquí, compruébalo. Una vez que tengas organizado tu modelo mental. El siguiente paso aquí es modelar la jerarquía de la información en categorías y emparejarlas con las órdenes y los pasos del modelo mental. Puedes ver esta información diagrama aquí tenemos los tamaños de helado, tenemos nuestros sabores, tenemos nuestros coberturas, y tenemos que información de pago aquí. Para que puedas ver este tipo de Mago saliendo como paso uno, paso dos, paso tres, paso cuatro. Ahora que tienes esto, puedes ir a crear un prototipo de baja fidelidad. Podrías empezar a sumergirte un poco más en el contenido que no necesitarías como cosas como imágenes y descripciones y campos de formulario. Y entonces querrías probar esto con tus clientes para asegurar el contenido, el modelo mental, el flujo de trabajo, todo tiene sentido y es fácil de usar. Sólo un poco más o menos ponemos un wireframe aquí. Tienes tu, tu mago aquí, Talla, elige tu talla. Cucharas medianas, pop sobre sabores, golpeó tus sabores, y luego iba a ir a coberturas. Y luego presione Siguiente presione el botón Atrás, y luego finalmente llegar a ser capaz de pedir varios de sus, los tamaños de helado o productos de helado aquí y luego pagar. Entonces vamos a desglosar lo que hace que aquí sea un buen mago. Se puede ver el paso completado aquí le permite al usuario saber lo que se hace. El paso naranja aquí le permite al usuario saber en qué paso está. El paso por delante aquí, eso es sólo gris, que permite al usuario saber qué pasos están por venir. Realmente siempre es bueno tener un título bajo cada uno de estos, de nuevo, que establezca la expectativa de lo que el usuario va a esperar y qué tipo de información va a venir a continuación. Y entonces cada uno debe tener una descripción o una llamada a acción para decirle al usuario qué hacer durante este paso. Entonces un buen asistente también tiene el botón Siguiente permite al usuario proceder adelante. Permite al usuario retroceder como botón secundario. Si se pierden algo en o necesitan cambiar algo que simplemente no lo hicieron. Paso uno o paso dos, pueden volver atrás. Y luego dejan que el usuario, dejen que el usuario cancele. Entonces el cáncer, todo esto, todo esto si es necesario. Algunos lo hacen y no recuerdan, muestran progreso de pasos. Eso es bueno. transportador muestra el tiempo y el progreso realizado, no mostrando aquí pasos de progreso. Al igual que estás en tu info y no sabes si acabas de completar estos. Mostrar buenos estados visuales para pasos terminados. Y el paso activo aquí, el paso por venir. Esto, incluso hemos hecho este color más grande, más brillante. Se puede ver que estamos usando las casillas de verificación aquí para los pasos terminados y no pasa nada para este paso y el futuro. Apenas un pequeño punto gris. Evita esto. Al igual que no está claro qué paso en auto en ninguna parte audaz esto y haciendo un poco mejor, pero ser más impactante, más intencional al respecto. Y así no se puede ver realmente ese tipo de progreso o esos fundamentos de lo que hace un buen mago entre las cosas que se habían hecho. Gracias por paso terminado en el que estás, Pasos a completar. Solo recuerda que cada paso debe tener la categoría de información que se relaciona con ella. Entonces si estás diciendo tu nombre o tu información aquí, ten el nombre, LastName. No uses cada paso para información específica. He visto esto una vez donde estaba como nombre, correo electrónico, teléfono, soy como, Bueno, eso es tan fácil. ¿ Por qué tengo que hacer esto en un mago? Como si pudiera hacer esto todo en una sola sesión. Entonces ese es el objetivo de estos es romper la larga tarea desalentadora y ponerla en pasos donde si es sólo nombre, correo electrónico, número de teléfono, cumpleaños, no necesitas un mago, como simplemente se cumple. Entonces déjame entrar a eso. Recuerda tener un botón Atrás que te permita volver fácilmente al pasado. Pero aquí está el pateador. Guarda esa información. Al igual que si el usuario ingresa información y retroceden un paso y van adelante un paso a este paso que acaban de seguir. No hagan que vuelvan a llenar esa información, salvo eso y como lo llamamos el front-end. Cuando vuelvan a la parte posterior, hagan un cambio, vayan adelante de nuevo, esa información debe seguir ahí. El botón Atrás es algo importante porque si dejas que el usuario regrese en el navegador y luego van hacia adelante en la aplicación. Es posible que no podamos guardar esa información que acaban de almacenar. Está bien, genial. Vámonos. Vamos a hablar de migas de pan, pero lo voy a hacer en otro video, así que te veo en el otro video. 19. Breadcrumbs: Hablemos de pan rallado. migas de pan son pequeña lista de enlaces de navegación que ayudan al usuario a ver la estructura jerárquica de un sitio a partir de la página principal. Esta forma de navegar por la estructura del sitio se denomina típicamente wayfinding. Son bastante simplemente se ven así. Tienes la computadora electrónica doméstica y los altavoces, y yo estaría mirando a los altavoces en el sitio. Se les llama pan rallado porque imitan pequeños trozos de pan que habían quedado en tu escritorio. Y realmente están destinados a ser pequeños y nunca reemplazar la navegación de nivel superior con estos, solo hay niveles adicionales de navegación utilizados para ayudar al usuario navegar sitios complejos muy grandes y aplicaciones. Son súper simples de diseñar ya que no varían de este ejemplo aquí que te estoy mostrando. Lo verás mucho en grandes aplicaciones de comercio electrónico. Lo verás aquí en Amazon. Lo verás aquí en Best Buy. Y de nuevo, muestran la estructura jerárquica de la arquitectura de la información de un sitio. Se puede ver aquí estoy en Amazon en este momento y estoy mirando prismáticos. Y me está haciendo saber que los prismáticos y mirando empieza desde la electrónica de casa y luego binoculares de cámara, binoculares. Pero si vuelvo a las fotos de la cámara por aquí, déjame simplemente desplazarse hacia abajo y agarrar otra de estas aquí. Vamos a ver las computadoras aquí. Vea cómo cambia esto por ejemplo, un monitor mirará este monitor. Voy a encontrar uno por aquí y lo hará, se actualizará. Sólo dame un segundo. Permítanme dar click en uno de estos. De acuerdo, entonces ves cómo es sólo hacerme saber que estoy mirando monitores, pero vino de accesorios de computación y electrónica aquí. No es que no me esté mostrando mi historia de donde apuesto a que solo me está mostrando la arquitectura del sitio. Esa es la pieza clave para estos. Hablemos un poco sobre uso y los mejores consejos para ellos. Por lo que solo use pan rallado para aplicaciones de sitios grandes con mucha información y contacto. Contacto. Lo mejor para grandes sitios de comercio electrónico como acabamos de ver con Amazon. Realmente no están pensados para arquitectura de información a nivel de padres, como un sitio de cartera o como un sitio web básico de la estrella de mamá y Pops. Las migas de pan, de nuevo nunca reemplazan esa navegación global. Y las migas de pan deben mostrar la ubicación actual y los sitios. Nuevamente, la estructura jerárquica, no la hist