Transcripciones
1. Introducción: Entonces, hola ahí. Espero que hoy tomaras un café porque esto va a ser todo un viaje. Entonces, me gustaría llevarte a un viaje por patrones de diseño con respuesta
inteligente y va a ser bastante divertido. Mi nombre es Vitaly y soy Redactor en Jefe y Smashing Magazine en la revista para diseñadores
y desarrolladores, y en los últimos años he estado haciendo mucho trabajo para diseño
responsive era pequeño y grande electrodoméstico. Siempre busco patrones de diseño específicos de problema de persecución realmente podemos resolverlos de una manera, que puedan aplicar más adelante a mi trabajo. Como redactor jefe, obviamente ejecuto esta medición en
sí, es solo un sitio web, no es mucho. Más pseudo silueta esta manera de solo ver un sitio web. Pero nosotros como científicos y desarrolladores tal vez lo veamos de manera diferente, y vemos muchas cajas por todas partes, y nuestro trabajo es básicamente simplemente mover estas cajas alrededor para asegurarnos de que creamos un sitio web, se escala hacia arriba y hacia abajo como nos gusta. Ahora bien, esto no es fácil por supuesto, pero es aún más difícil sitio web, es más difícil. Esto es como una miríada de cajas desde pequeñas a grandes hasta tabletas para pantallas así, obviamente contratistas. No son solo pantallas, también
se trata de la forma en que las personas realmente interactúan con nuestras interfaces. Entonces, esto es un gran problema. Ahora bien, este taller no se trata de esto, esta agua no se trataba de cajas. Realmente no me importa pero piensa en el diseño responsivo teniendo visión general boxy somos solo forma. Esta clase tampoco se trata de tendencias de caja, porque realmente las tendencias vienen y van pero realmente no se quedan. Entonces, para mí es realmente darte algunas ideas para el resultado pensamientos sobre lo que puedes aplicar a tu trabajo más allá de eso en la parte superior. Tampoco se trata de marcos como desollar cosas y asegurarse de que funcionen, se trata más de ideas y técnicas reales. Correcto. Desde que muestro trabajando o fallando en proyectos reales y ¿por qué? También se trata de patrones de diseño correctos. ¿ Cuáles son las cosas que realmente podemos seguir adelante y aplicar a nuestro trabajo ya que en realidad rendimos residuos de cultivos? La mayoría de las cosas que voy a mostrar son un poco locas, puede
que no te guste la mayoría de ellas. Podrían sonar o podrían parecer que son raros y fuera de lugar a veces. También a veces bastante complejos e inusuales. Es posible que no te estés topando con este problema todo el tiempo, pero podrías tropezar con problemas similares y una vez que lo
hagas, sabrás exactamente qué hacer y cómo lidiar. Esto va a ser bastante divertido miraremos al discípulo sensible, sin respuesta, gran perspectiva primero y luego nos sumergimos en lo profundo de
esos pequeños componentes moleculares y
pensaremos en esos pequeños componentes moleculares y algunos formas interesantes de cómo hacer las cosas bien. Abróchate el cinturón de seguridad, esto va a ser todo un viaje.
2. PROYECTO: Está bien. Si bien diseñar algunos componentes es una cosa, pero en realidad ponerlos juntos dentro de la interfaz es una historia completamente diferente. Ahora, en realidad, no puedes simplemente seguir adelante y tomar, diseñar una mesa por aquí y tal vez escoger tipografía por aquí, y tal vez unas cajas de luz por ahí, y bajar por aquí y luego ponerla por completo y llamarla diseño. Ahora bien, esto no es realmente diseño. Esto es más como juntar las cosas. El diseño necesita una imagen grande. Necesitas saber a dónde te diriges visualmente y también en cuanto a maquetación, ¿no? Entonces, requiere un poco más de trabajo. Ahora, podemos mirar todos esos componentes de los que hablamos individualmente, pero hay que saber, necesitamos saber exactamente cómo ponerlos juntos dentro de un contexto determinado, ¿verdad? Entonces, ¿y si echamos un vistazo más de cerca a la interfaz más compleja, verdad? O tal vez sólo un ejemplo de una interfaz compleja realmente. ¿ Y si realmente pensamos en la interfaz así, verdad? Un diseño de artículo, maquetación tipo revista. Entonces, lo que tenemos aquí es un bonito diseño que elegí, y este artículo que elegí, que es dirigido por el arte. Entonces, tiene muchas cosas pasando, ¿verdad? Pero si realmente lo piensas de cerca, bueno, hay pocos componentes, ¿verdad? Pero más específicamente, bueno, se
repiten una y otra vez. Además, hay algunas secciones más o menos complejas por supuesto, pero encontrarás muchas ilustraciones. Encontrarás muchas cotizaciones completas, encontrarás muchos de
los diferentes componentes pequeños que realmente conforman la interfaz. Entonces, ¿y si los miramos? En realidad, si los miras y este lado de esta página, lo que descubrirás, bueno, en realidad son 26 de ellos, ¿verdad? Entonces, con solo recrear esta página, podemos aprender mucho de qué, cómo poner todos esos componentes, o explorar todos los patrones de diseño que vamos a hablar en las próximas secciones. Llévalos juntos en una sola pieza. Contamos con navegación, topografía, imágenes dirigidas por arte, ilustraciones, gráficos, gráficos, citas de pull, sidenotes, notas al pie, elementos de
medios, biografía, artículos relacionados, caja de newsletter, unidades
publicitarias, cajas promocionales, Me estoy quedando sin aire, ¿de acuerdo? Entonces, esto es mucho. Entonces, ¿qué pasa si realmente tomamos esto y miramos en los diferentes componentes que lo componen, e intentamos diseñarlos, y peinarlos, y juntarlos. A lo mejor reorganizarlos, míralos específicamente a todos los diferentes detalles que realmente los
componen y luego ponerlos juntos en una sola interfaz. A lo mejor se va a ver similar y lo
mejor se va a ver muy diferente, pero el punto es, este va a ser nuestro experimento y ejercicio para poner todas esas cosas que vamos a explorar y encontrar una forma de cómo hacerlas funcionar. Entonces, hagamos esto.
3. ¿Qué diseño son patrones de diseño?: Patrones de diseño. Ahora, cuando hablamos de patrones de diseño, bueno, en realidad no tienen una buena reputación en la comunidad. Cuando pensamos en patrones de diseño, tendemos a pensar en soluciones perezosas, o en componentes fuera de la estantería si quieres. Simplemente lo sacas de la estantería, lo aplicas a tu proyecto. A veces eso estamos pensando en el contexto que tenemos, y tú llamas el día. Esto es más o menos, verdad. Bueno, esto no es del todo de lo que he
hablado cuando hablamos de patrones de diseño en esta sesión. También llamamos a la cosa famoso chico humilde tipo de paralaje y el diseño de una sola página es un patrón. Pero para mí, no lo son. Se parecen más a las tendencias, y las tendencias realmente no importan pero las técnicas sí. Entonces, cuando hablamos de patrones aquí, estamos hablando de técnicas de diseño inteligentes y
útiles que en realidad demostraron funcionar en proyectos de la vida real. Entonces, estas técnicas no son realmente un punto final seguro a prueba de balas de un diseño. Verlas más como una conversación de diseño o como un iniciador, iniciador de conversación de diseño. Esto es algo con lo que comenzarías para construir. Por lo que realmente tomarías una de esas soluciones entonces pensarás en las formas de cómo puedes aplicarla. Construye encima de ella y aplícala a tu proyecto. Entonces, nunca son una especie de soluciones de acabado sino más como unas ideas sin forma que necesitas nutrir, que necesitas moldear, que necesitas formar, y traerlas a la vida. Ahora, Mark Boulton en realidad, dijo una vez que ese proceso de diseño es extraño y complicado porque involucra a personas y organizaciones, que a menudo son raras y complicadas. Bueno, para ser honesto, en muchos del proyecto en el que estaba trabajando, este es exactamente el problema porque los gerentes, las personas con las que trabajo en los proyectos en realidad tienen una visión muy estándar o clásica de lo receptiva proceso funciona, y para ser honesto cómo funciona un proceso creativo en general. Se ve así derecho. Donde tienes un comienzo en alguna parte, y tienes un final en alguna parte, y luego solo sigue tus iteraciones, y solo sigues adelante, bien. Es muy lineal. Es muy predecible. Pero esto no es así en la realidad en absoluto, verdad. Porque la realidad se ve muy, muy diferente. Para mí, es más como una meticulosa serie de sprints donde realmente comienzas a algún lugar y comienzas a explorar, y te diverges, y descubres que tal vez debería hacer esto, o tal vez debería hacerlo. A lo mejor mi mesa debería verse así. Hago mi diseño se verá así, y así sucesivamente, y así sucesivamente, correcto. Entonces, realmente vas adelante y exploras, y te das cuenta de lo que funciona mejor dando tus requerimientos. Entonces en algún momento, terminarás con puntos muertos, callejones sin salida. Bueno, no hay manera a partir de ahí. Tal vez alguien mató tu idea, tal vez murió silenciosamente en una sala de reuniones o lo que sea. Pero hay que repensar. Necesitas pensar en diferentes formas de abordar el mismo problema, y aquí es donde siento que pierdes más tiempo, y porque quiero ser eficiente, no
puedo permitirme perder tiempo. Entonces este es exactamente el punto donde esos patrones de diseño pueden ser extremadamente útiles porque puedes saber, vale, en esta situación, este patrón específico, esta solución específica podría funcionar bien. No lo voy a aplicar uno a uno. Pero dado el contexto que
tengo, podría intentar encontrar una manera de implementarlo realmente de una manera adecuada para que esta fase de exploración no tenga que tomar tanto tiempo, verdad. Entonces, puedes moverte de aquí hacia algo, un mejor lugar donde realmente puedas llegar fácilmente, y luego converger hacia la idea final. Es por ello que cuando realmente empezamos a diseñar muy a menudo. En realidad vamos a tus tiendas como Styleguide Boilerplate patrón hoja de cálculo que en realidad enlistan todos estos diferentes componentes en un lado y todos los diferentes marcos en el otro lado. Entonces es genial para prototipar porque solo puedes seguir adelante y mirar, bien, tal vez necesito selector de ocurrencias y no necesitas escribir desde cero. Correcto. Simplemente puedes tomarlo y traerlo en tu proyecto, en tu diseño, en tu código, y lo tienes, correcto. Lo obvio probablemente no sea lo que vas a usar cuando realmente comiences a diseñar o construir. Pero esto es realmente genial para que los prototipos sean rápidos. Entonces, esto es una especie de los patrones de diseño de los que estoy hablando. Algo desnudo, algo para llegar a necesitar formar y dar forma y que construyes cuando comienzas. Ahora, en las siguientes secciones, vamos a cubrir un montón de segmentos diferentes de diferentes áreas, y comenzaremos con la navegación, y pasaremos por diferentes tipos de navegación, iconografía, hasta acordeones, hasta tablas y calendarios, formularios, elementos de entrada. Bueno, elementos de forma en general, líneas de tiempo, gráficos y gráficos, mapas, notas al pie, etcétera, etcétera. Cuanto más vayamos, más difíciles o más complejos van a ser algunos de esos componentes. Pero al final, todo va a
tener sentido porque realmente no son tan difíciles. Entonces, sigamos adelante, y sigamos con la navegación.
4. Navegación: Sorprendentemente, hacer que el contenido sea accesible y disponible a través de todas las diferentes pantallas, es realmente, realmente difícil, y no es solo el tema del diseño. También es cuestión de lo que pones, y dónde, y cómo presentas la navegación. Porque podrías tener seis, siete, ocho mega dropdowns a gran vista, pero ¿qué demonios vas a hacer con ello a menor vista? Ahora bien, esto siempre es un problema. Ahora, hay oficinas establecido paradigma de contenido de la paridad de contenido, que está gobernando el diseño responsivo de todos modos, lo
que dice, bueno, tus usuarios van a hacer lo que quieran hacer básicamente. Siempre que alguien acuda a ti y te diga que tus usuarios no van a hacer X, o usar esta característica, o leer este artículo, o necesitan esta parte específica del diseño, bueno, siempre pregunta los motivos porque nunca se sabe. La gente puede hacer lo que quiera hacer y lo harán. Entonces, es por eso que esta paridad de contenido es realmente prevalente. No quiere decir que la experiencia vaya a ser idéntica y va a ser la misma en todas partes. No se puede tener tanto contenido, como mucha navegación tanto en el escritorio como en una pantalla pequeña, pero sí se puede, y hay que asegurarse de que todo el contenido, y todas las características sean accesibles en ambos. Entonces, tal vez en realidad puedas mostrar la vista grande de navegación completa, pero tal vez también podamos usar revelación progresiva, o acordeones, o simplemente ocultar cosas detrás del enlace en una vista más pequeña también. Ahora, una forma equivocada de hacer esto sería realmente seguir adelante y tomar la navegación que tienes en el escritorio, y traducirla casi uno a uno para asegurarse de que se vea más o menos igual en el móvil y funcione exactamente igual en móvil. Ahora aquí, tenemos un sitio web de Middlesex-London Health Unit y esto es en realidad lo que hacen, donde tienen navegación primaria en la parte superior, navegación global, y tienes sub-dropdowns, y también tienes búsqueda, y también tienes obviamente un contenido de navegación regular artículos relacionados, y así sucesivamente y así sucesivamente. Entonces, lo que hacen en la vista más pequeña es en realidad mostrar prácticamente todo. Todavía tienes esta navegación global en la parte superior, tienes un gran logo, y luego tienes tus dropdowns porque con unos cuantos dropdowns mudos, raros o misteriosos aquí. Pero, entonces también tienen sub-navegación en la parte superior o en la parte inferior, lo siento, y si haces clic en
él, en realidad se extiende, y luego tienes una barra de búsqueda también. Ahora bien, esto es simplemente demasiada navegación, no se necesita tanta navegación en absoluto porque obviamente
la forma en que las personas interactúan con el dispositivo es diferente en el escritorio y el móvil. En el escritorio, bueno, tienes mucho clic, en el dispositivo móvil mientras que podrías terminar con mucho deslizar y desplazarte hacia abajo. Entonces, lo que siempre se puede hacer es obviamente priorizar. Esto es lo que hace WWF. Bueno, obviamente tienen mucho contenido que mostrar como proyectos relacionados,
y noticias, y todos los diferentes proyectos en los que están trabajando. Pero, más específicamente obviamente, tienen muchos archivos de todos los años. Entonces, cada cosa que tienen en la navegación es un desplegable: Especies, Lugares, Amenazas, Nuestro Trabajo, etcétera y demás. Pero, en lugar de realmente sólo mostrarlos a todos en un gran acordeón enorme, priorizan. A pesar de que lo hacen en cambio es en realidad tener dos enlaces, botones de
llamada a la acción que en realidad conducen a la donación, donación y adopción. Entonces, también tienen el infame icono de la hamburguesa en la esquina superior derecha, que apenas se desliza en las secciones primarias de navegación, no todo, sino sólo la primaria. Entonces, cuando llegues ahí, en realidad puedes navegar más allá. Si reducir la complejidad que tenían fueron ocho dropdowns en algo mucho más manejable. Ahora, el off-canvas en
sí, no siempre es buena idea tener eso porque cuando terminas con la navegación off-canvas, siempre
terminas con muchos artículos secundarios escondidos en ese cajón y no son utilizado necesariamente. Entonces, piénsalo dos veces en lo que realmente estás poniendo ahí. De hecho, lo que hemos estado tratando de hacer en los últimos años es en realidad
tratar de averiguar qué podemos hacer para priorizar tales. Entonces, proporcionamos una búsqueda en sí primero, y la hacemos lo mejor que podamos, y tratamos de ejecutar algunas pruebas para averiguar ¿realmente lo necesitan los usuarios? ¿Lo usan? ¿ Están bien con la búsqueda sola sin navegación del todo? Por lo general, por supuesto, no lo son, así que agregamos una capa de navegación, y luego si sigue siendo la misma, agregamos la segunda capa de navegación. Entonces, siempre pensamos en la navegación como capas de cebolla y agregas más solo si necesitas, entonces nunca tuvimos que tener más de dos capas. Entonces, este ícono de la hamburguesa obviamente está en todas partes, pero lo que también descubrimos es muy interesante es que gente use el ícono de la hamburguesa en escenarios muy diferentes. Ahora, debido a que las opciones de navegación no están disponibles cuando se accede al sitio, lo que notamos ahora es prueba de capacidad es que la gente realmente entra a usar este icono con el fin de realmente obtener información sobre de qué se trata el sitio web. Pero, en lugar de entrar realmente en una sección dentro del cajón, lo que realmente hacen en su lugar es en realidad sólo abrirla, y cerrarla de nuevo. Simplemente teniendo la idea de lo que es. Entonces, este patrón que en realidad Star Wars está usando, cuando realmente tienes el ícono de la hamburguesa
y off-canvas, y luego la navegación deslizándose de izquierda a derecha, bueno, eso es muy conveniente. Pero, podemos hacerlo un poco mejor si
solo nos aseguramos de que cada vez que realmente haga clic en ese icono, siempre
tenga el botón X o el icono X, o lo que sea, para cerrarlo de inmediato. Sólo un poquito mejor. Ahora, el propio ícono de la hamburguesa, ha habido mucha discusión al respecto, pero lo más importante es realmente importante
tener en cuenta que no es entendida por todos. Además, siempre que pongas un icono en tu interfaz y escondas algunas acciones importantes detrás de él, podrías terminar con una baja relación de compromiso. Probablemente haya pasado en casi todos los proyectos en los que estamos trabajando, así que hay que tener mucho cuidado ahí. Time.com es el mejor ejemplo para eso donde realmente agregaron el ícono y notaron que la conversión real disminuyó y los clics disminuyeron, por lo que agregaron el menú de texto para explicar qué es porque
sentían tal vez la gente simplemente no entiendo lo que es y realmente no cambió. Después, agregaron una superposición explicando lo que significa
este ícono y todavía no cambió mucho. Porque cuando escondes algo detrás de un ícono, no
debes preguntarte por qué la gente deja de hacer clic. Entonces, en cambio lo que podemos hacer es como sugiere Luke Rublevka, finalmente no se reconoce el ícono de la
hamburguesa, así que tal vez solo use Menu en su lugar para asegurarse de que eso esté claro. Mantén visibles las acciones importantes, no detrás de un ícono con un menú de etiquetas claro y una forma clara de botón para bailar. Si necesitas usar el ícono de la hamburguesa, en realidad
puedes usarlo de esta manera donde realmente puede flotar a la derecha, a la izquierda mientras te desplazas hacia abajo por el sitio web. Entonces, siempre está disponible, pero no es realmente molesto. Entonces, es bastante guay. Pero, también lo más importante, el patrón más útil que seguimos usando todo el tiempo es el que llamamos menú más patrón de búsqueda. No importa cuánta navegación primaria tengas, y no importa lo compleja que sea tu interfaz dentro de tu sitio web. A lo mejor tienes lengüetas y acordeón, tal vez todo mezclado entre sí. Lo que siempre puedes hacer es bajarlo a esta simple vista de menú y búsqueda, donde tienes el menú y puedes estar fuera de lienzo si tienes muchos elementos, o podría estar simplemente deslizándose entre el logo y el contenido si solo son cinco o seis. Entonces, tienes búsqueda, y luego permites que la gente busque. Sea lo que sea que tengas dentro de tu interfaz, bueno, solo
puedes cambiar la orientación a veces, si son pestañas aún podrían ser pestañas. Entonces, el acordeón horizontal, se va a convertir en acordeón vertical. De hecho, el acordeón es en realidad la bala dorada en muchos, muchos escenarios. Si no sabes qué hacer, prueba el acordeón. Por alguna extraña razón, siempre funciona casi en todas partes. Otra cosa común a tener en cuenta es, siempre que tengas este off-canvas, siempre
terminas con este rango incómodo porque puedes mostrar algunos artículos, casi todos los artículos a gran vista, pero no puedes mostrar muchos artículos en la vista más pequeña, entonces, ¿qué sucede en el medio? En medio muy a menudo terminas sin mostrar nada aunque podrías. Entonces, ¿qué pasa si realmente usas este espacio disponible de manera significativa, y esto es lo que hace el Guardián. Ahora, The Guardian tiene 13, 14 artículos que se muestran a gran vista y luego tenían este viejo botón. También puedes hacer clic y luego obtener información sobre todas las demás opciones de navegación que tengas. Pero, priorizan lo que es importante, lo que impulsa más tráfico hacia ellos y esos artículos se listan de izquierda a derecha en esto de acuerdo a estas prioridades de tráfico. Entonces, las más importantes son las secciones de uso pesado siempre están disponibles, y pueden mostrar todo lo que puedan, cuando pueden y si necesitas mostrar para ver todo lo demás, en realidad
puedes ver todo lo demás. En realidad es lo mismo lo que hace Google. Google Docs, porque sería raro solo mostrar unos iconos primero, y después tener un ícono de hamburguesa para mostrarlos a todos, simplemente no tiene sentido. Entonces, esto funciona muy bien. Lo último que en realidad puede funcionar bastante bien es pensar quizás en navegaciones más complejas como esta, donde tienes muchos filtros, lo que podría funcionar realmente bien aquí es en realidad mirar en lo específico secciones que necesitas diseñar, en este caso unos filtros para tal vez un sitio de comercio electrónico. Trata de buscar solo el contenido, extraer el significado y rediseñarlo. Entonces, si piensas en esto, bueno, podrías tener algunos filtros, tal vez sea tamaño emitido, tal vez sea una marca, tal vez sea color, cosas así. Entonces, en realidad puedes separarlo en
trozos, en pestañas, y presentarlos en la parte inferior, tres de ellos para que la gente cada vez que haces clic en
ellos, en realidad pueden conseguir tal vez tres, cuatro elementos a la vez y pueden navegar con ellos. Simplemente tiene mucho más sentido. Otra cosa que en realidad puede funcionar muy bien en estos escenarios es este enfoque del modo de vista, que lo lleva un poco más lejos. Bueno, la idea es usar el patrón off-canvas, pero también con este enfoque del modo de vista cuando en realidad se pueden tener vistas encapsuladas. Entonces, tienes el contenido en la parte posterior y al mismo tiempo tienes una capa de la navegación a la derecha, o a la izquierda, por supuesto, dependiendo de tu diseño. Lo cual puede funcionar sorprendentemente bien en muchos escenarios, aquí se hace sobre la descomposición del cáncer, donde realmente tienes algunos ítems de navegación y puede navegar fácilmente y ver el contenido al mismo tiempo. Puedes, por supuesto, también tenerlo en escenarios más complejos como en un checkout aquí, donde aquí en cottonbureau.com si quieres agregar un artículo al carrito y quieres checar, sí checas y todo vuelve a estar fuera de lona en esta vistas encapsuladas. Puede ser realmente útil. Entonces, ¿qué podemos hacer? Bueno, podemos pensar en la navegación en capas de cebolla, agregar la búsqueda primero, pensar en la navegación primaria, navegación
secundaria, tal vez acordeones, cosas así, pero nunca, probablemente no es una buena idea para realmente mover más allá del tercer nivel de navegación. Mantén los botones cercanos y abiertos en el mismo lugar, modo que siempre que los usuarios hagan clic en el icono para abrir el cajón, en realidad
pueden cerrarlo de inmediato. Si tienes muchos ítems mostrando en la navegación, piensa en este menú y patrón de búsqueda con off-canvas. Funciona prácticamente en todas partes. Al mismo tiempo, podemos extenderlo al patrón de prioridad más, que en realidad es aún mejor teniendo en cuenta que podría tener algunos botones de llamada a la acción realmente importantes, por ejemplo, una llamada a la acción enlaces que necesitan para mantener en todas partes. Tienen algunos elementos que solo se pueden deslizar en el contenido con el botón de menú entre el logotipo y el contenido. Es realmente una buena idea mantener
visibles las acciones importantes y si tienes una navegación muy compleja, podrías considerar realmente tener algunas pestañas, intenta simplemente reducir esta complejidad que
tienes en algo más manejables, a trozos manejables. Además, debido a que tenemos pantallas más altas, piensa en que los controles sean accesibles en la parte inferior de tu pantalla móvil, no necesariamente en la parte superior porque a veces estos controles superiores pueden ser realmente difíciles de golpear, mientras que los de abajo son mucho, mucho más fáciles de golpear. Con eso en mente, en realidad se puede crear algún tipo de navegación que funciona notablemente bien a través de diferentes pantallas y no hace que la interfaz se sienta abarrotada. Ahora, que tenemos una idea de qué hacer con la navegación, podemos pasar a algunos pequeños iconos diminutos y asegurarnos de que también sean sensibles.
5. Iconografía: Ahora, en la sección de navegación, hablamos del ícono de la hamburguesa y luego algunas personas quizá no sepan realmente lo que significa este ícono. Entonces, la selección de un ícono importa mucho. Pero lo que también importa es cómo se muestra ese ícono, ¿verdad? Y aquí es donde entra en su lugar el concepto de iconografía receptiva. Porque siempre que realmente hables con un diseñador sobre lo que realmente pensaron cuando realmente están diseñando o diseñando un ícono, siempre
hablarán del punto dulce, esta área donde escogieron con el fin de diseñar el icono primero. No es de extrañar entonces si escalas este ícono o bajas el ícono, no
se ve tan afilado ni tan bueno, ¿verdad? Entonces, sólo porque una imagen sea escalable, no significa que vaya a ser legible, y la mayoría de los elementos visuales tienen esta flecha perfecta, tamaño
perfecto para el que fueron diseñados. No sólo iconos sino prácticamente todos los elementos visuales. Entonces, teniendo eso en cuenta, podríamos necesitar considerar hacer esto, ¿no? Tipo de ajustar las cosas el nivel de fidelidad para nuestros iconos en función de la pantalla de la ventana gráfica o de la altura. Ahora bien, podrías pensar bien esto no es realmente necesario en muchos escenarios como por qué crearías seis, siete ilustraciones diferentes con el fin crear una especie de experiencia muy única para todas esas pantallas? Bueno, puede que no lo necesites para todos esos visuales, todos los iconos, pero hay un caso de uso específico con volverse realmente, realmente importante, y esto es branding. Porque muy a menudo, tienes un logotipo ocupando mucho espacio,
tomando realmente valioso espacio de presión en un dispositivo móvil, reservándolo para algunos buenos materiales realmente no quieren prestar atención, porque vinieron por el contenido, ¿verdad? Entonces, ¿qué haces entonces? Bueno, en realidad podrías ajustar realmente el nivel de fidelidad. A lo mejor tienes tres vistas diferentes o tres diseños diferentes para tu logo, y luego decides cuándo poner qué, fin de reducir la cantidad de espacio que se requiere para que se muestre el logotipo. Entonces, empujando el contenido hacia adelante para que siempre puedas verlo mejor. De hecho, muchos escenarios, podrías pensar, bueno ese tipo de logotipo reductor es realmente difícil porque estás perdiendo mucho detalle y el logo es realmente importante para una marca, pero en muchos casos, simplemente no es eso difícil en absoluto, porque en realidad cuanto más se simplifica, más atemporal se vuelve, y todavía va a ser reconocible, como se puede ver en estos escenarios. Entonces, ¿cuáles son las técnicas prácticas que puedes usar a la hora de diseñar esos logotipos? Bueno puedes pensar en el nivel de detalle, puedes pensar en el grosor de las líneas, o puedes pensar en los textos o los contornos del texto, o lo que exactamente pones y cómo lo diseñas, el textura y cosas así. También se puede pensar en la posición, y la estructura. Entonces, si tienes un icono y tienes un texto debajo de él,
es posible que realmente quieras mirarlo y reposicionar algunos de los elementos para que no ocupen tanto espacio vertical. También por supuesto, tenemos algo así como texto circular que rodea tu logo. Bueno, simplemente no va a funcionar en pantallas pequeñas, así que en realidad puedes igual de bueno simplemente quitarlo y
tratar de hacerlo un poco más simple, y también más memorable, y la forma en que diseñarías para construirlo más tarde, solo
pones diferentes iconos dentro de SVG brillantes y potencialmente solo usan algunas pistas de medios dentro de SVG para apuntar a pantallas específicas para diseñar pantallas específicas. Ahora bien, esto es lo que podemos hacer con el ícono real pero realmente tenemos que pensar un poco más en la posición, porque en este ejemplo realmente sencillo de aquí, qué puedo hacer tú eliges, pero también ¿dónde lo pones? Entonces si tienes unos acordeón, entonces si sub desplegables, ¿
pondrás el icono a la derecha o a la izquierda del texto? O ¿qué icono elegirías en realidad, usarías una flecha más o flecha hacia abajo a la derecha? Esto es algo importante. Ahora, la buena noticia es que los chicos que dirigen el estudio descubrieron que casi todo el mundo entiende lo que significa, por lo que se puede tener un texto a la
izquierda, a la derecha, iconos a la izquierda y a la derecha. La gente sí lo consigue, pero la gente hace clic en diferentes áreas. Por lo que el heatmap va a ser muy diferente
dependiendo de dónde coloques tu ícono y no solo el mapa de temperaturas, sino también el tiempo real de finalización de tareas también será diferente, y entonces no estamos hablando de unos 100 milisegundos. Aquí, la diferencia es de alrededor 1.5 segundos entre el que tiene más tiempo o menos tiempo, por lo que realmente importa. Entonces, ¿qué hacemos aquí? Bueno, lo que averiguamos es que la forma en que el ícono se coloca la derecha es que solo tenderá a hacer clic en el ícono y no en el texto, ahora eso es realmente importante, y todas las opciones con iconos colocados a la derecha dieron como resultado una tarea más lenta terminación, aunque no significa que vaya,
no va a funcionar en nuestros escenarios, así tampoco, lo siento. Lo que significa es que cada vez que realmente ponemos un icono a la derecha, mejor
nos aseguramos de que esto sea realmente, realmente grande, porque de lo contrario la gente no podrá hacer clic en él. También podemos por supuesto cambiar el grosor real y los estilos mientras estamos en el hover y realmente reajustarlo de manera muy granular, y esto es lo que podemos hacer hoy sin tener que pasar mucho tiempo en el código. Entonces, estas son todas las opciones que tenemos para hacer que nuestros iconos aparezcan un poco mejor. Entonces, ¿qué podemos hacer? Ahora, podemos simplificar los iconos para una apariencia clara, para que se vean realmente mejor y más nítidos. Podemos ahorrar espacio vertical usando este pequeño truco donde realmente reposicionamos alguna parte del logo, para que no ocupe tanto espacio vertical. Áreas específicas especialmente si sabemos que los usuarios se van a enfocar en el ícono como lo hacen en sub desplegables, cuando se colocan a la derecha, elige iconos más grandes para que sean más fáciles de tocar, y obviamente nosotros necesita elegir un icono dependiendo del contexto derecho. Y potencialmente incluso evitar iconos por completo si podemos, si necesitamos tener algo un poco más claro como el menú en lugar de una hamburguesa. Correcto. Por lo que estas son las cosas que puedes hacer para que tus iconos sean un poco más receptivos, para asegurarte de que funcionen y se vean bien en todas partes. Ahora, que en realidad hemos tratado con los visuales, tal vez podamos pasar a la estructura y hablar de algo tan elegante como las mesas, a continuación.
6. Tablas y calendarios: Estructura de los metales también, por supuesto. Ahora hablamos de diseño visual, hablamos de navegación y hay formas de redistribución del contenido a través de un layout para asegurarnos de que funcione, pero algunos componentes son simplemente más difíciles de abordar. Piensa en componentes con relaciones firmes como tablas o calendarios. No puedes simplemente seguir adelante y moverlos y exprimirlos en poco espacio. Es posible que tengas que repensar completamente cómo presentas el contenido que en realidad se queda en tu mesa o en un calendario. El problema es que muy a menudo las mesas solo se ven horribles y funcionan horribles en las pantallas móviles. Necesitas acercar y alejar todo el tiempo y no puedes ver toda
la tabla y es realmente, realmente molesto. Entonces, ¿cómo tratamos con ellos? Ahora, hay una solución simple. El caso es que no necesariamente necesitas mostrar todas las columnas de tu mesa todo el tiempo, ¿verdad? Entonces, como diseñador, podrías decidir bien, en este escenario específico, voy a priorizar estas columnas. Voy a detectar lo que es importante y lo voy a empujar
al usuario y permitirles realmente seleccionar lo que quieren ver. Entonces, tal vez no quieran ver todo a la vez de todos modos. Entonces, déjalos seleccionar lo que quieren ver y si quieren ver todo bien, entonces en realidad puedes hacerlo. Entonces tendrás esta experiencia iframe que queremos evitar. Pero por defecto, en realidad tomamos decisiones sobre cuántas columnas se van a mostrar y esta experiencia va a ser plenamente receptiva. Van a extender este ejemplo al tener un botón display all y un botón display. que hace que sea un poco más fácil para el usuario tal vez
navegar realmente por la tabla y lo que yo
también tendría probablemente solo ser activado por defecto, es el llamado modo de enfoque. Donde en realidad puedes simplemente ayudar al usuario a tocar una fila específica o una columna o una celda tal vez, y resaltar el área donde realmente se encuentran. Porque sobre todo si quieres ver todas las columnas, podrías terminar en este enorme océano de datos por el que tienes que navegar y podrías perder la pista. Es posible que no sepas exactamente qué dígitos estás mirando. Entonces, esto es realmente, realmente importante y útil. Entonces, aquí hay un ejemplo práctico para eso. Donde la aplicación de musa fue implicación para el personal de calificación y lo que hicieron es, bueno, crearon una cuadrícula de datos que utiliza exactamente ese patrón. Entonces, puedes ver a la derecha aquí, bueno, solo
puedes tocar una celda y cambia el contenido, cambia los datos reales. Al mismo tiempo, puedes seleccionar lo que quieres ver, qué opciones o qué columnas quieres ver y las verás. La selección es realizada por defecto por los diseñadores. En ocasiones es posible que desee tener un encabezado fijo. Eso también funciona porque es posible que tengas una mesa grande en la vista grande y luego vista pequeña quizá quieras mantenerla a flote. Entonces, podrías mantenerlo intacto. Entonces, en realidad puedes seguir adelante y mostrarlo mientras todos los demás elementos van a tener esta experiencia iframe. También a veces, se puede hacer algo completamente diferente. Entonces, aquí tienes una tabla de datos con muchos datos y podrías elegir simplemente seguir adelante y tal vez visualizarla. ¿Por qué no? Entonces, podrías convertir una mesa en algo completamente diferente. A lo mejor un gráfico o gráfico. Tiene sentido pero en ese caso, simplemente
seguiría adelante y no mostraría solo gráfico en la vista pequeña y solo tabla en vista grande, sino que en realidad permitiría al usuario seleccionar lo que quiere ver. Algunos quizás tienen una vista de gráfico por defecto con tabling en móvil y luego el escritorio teniendo una tabla con el enlace de gráfico permitiendo a los usuarios cambiar la vista. Un patrón muy común es un patrón de botón de opción. Siempre que tengas una matriz de dos o más cosas específicas que quieres que el usuario pueda seleccionar, bueno, siempre terminas con este tipo de patrón. Donde podrías tener por ejemplo, en cines, podrías tener un título de espectáculo y podrías tener tiempos en la parte superior. En ese caso, si solo quieres ahorrar un poco de espacio, lo que puedes hacer es sólo hasta que los encabezados un poco. En ese caso, en ese tiempo de esta manera en realidad ahorras bastante espacio al no hacer mucho, para ser honesto. Ahora, otra cosa que puedes hacer por supuesto, es lidiar con calendarios. Ahora, los calendarios tienen historia muy diferente por completo. No se puede decir que voy a dejar caer todos los viernes porque no importan. Bueno, en realidad lo hacen. Entonces, ¿a qué se dedica? Bueno, en ese caso, piensa un poco más abstractamente en la forma en que realmente diseñas. Piensa en el contenido que realmente va en esta tabla. Extraerlo, rediseñarlo, re barajarlo, y ponerlo específicamente diseñado para el espacio móvil. Entonces, aquí tenemos esta mesa con días corriendo en la parte superior y el tiempo en la izquierda y puedes simplemente
seguir adelante y en realidad simplemente cambiarla en algo completamente diferente. A lo mejor dos vistas. Una sería una tabla pequeña y la otra será una base de datos, porque obviamente eso es mucho más fácil conseguir responsive. Entonces, no necesitas tener esta experiencia uno a uno. Puede diferir mucho. O cualquier otro tipo de mesa. Se puede aplicar prácticamente la misma lógica. Aquí tienes liga AFC y NFC para playoffs de la NFL y obviamente, tienes mucho detalle y no puedes simplemente dejar caer algunas columnas. Simplemente no es como funciona. Entonces en ese caso, solo puedes intentar jugar un
poco con el tamaño y cambiar la topografía poco, relleno, modelado, etcétera. En algún momento, simplemente ya no funciona. Entonces, puedes voltear, obviamente. Simplemente voltea un poco el diseño mostrando liga AFC por defecto que es lo que hacen, y luego tener un deslizador deslizándose hacia la liga NFC. Pero podría igual de bien tal vez usar un conjunto de acordeones y tal vez simplemente cambiar el nivel de fidelidad visual aquí. No necesitas mostrar todos los logotipos en unos todo el tiempo y de esa forma podrías ahorrar algo de espacio. Entonces, ¿qué puedes hacer? Bueno, puedes priorizar columnas importantes y soltar columnas que no necesitas y permitir que los usuarios seleccionen lo que quieren ver. Se puede establecer para la navegación también para permitir que los usuarios muevan entre las partes de la tabla en fragmentos y partes. Se puede visualizar contenido y volver a posicionar encabezamientos. Inclinarlos un poco para ahorrar un poco de espacio vertical. También puedes simplemente bajar la fidelidad para realmente complejas como las mesas de torneo, pero más específicamente, mirar
siempre el contenido, extraer el significado del mismo, e intentar reutilizarlo o reempaquetarlo y diseñar propiamente para el espacio móvil. Porque esto es realmente una cosa muy a menudo muy diferente a lo que tienes en el escritorio. Entonces, eso en mente, tienes algunas estrategias para lidiar con mesas. Entonces, pasemos a los formularios web a continuación.
7. Formularios web (parte I): Entonces, de todos los componentes que tenemos algunos son ridículamente molestos. Cuando hablo de molestos, hablo de formularios web. Porque ambas formas son muy tediosas y son extremadamente difíciles y realmente simplemente frustrantes de rellenar en un dispositivo móvil. Entonces, ¿cómo puedo mejorarlos? Especialmente, pensando en el diseño responsive en general. Ahora, hay estrategias generales obvias que tenemos que tener en cuenta todo el tiempo y realmente no son tan difíciles. Ahora en primer lugar, necesitamos colocar etiquetas por encima de los campos de entrada, sólo porque realmente creamos este bonito camino lineal que ustedes pueden seguir sin tener que desplazarse hacia la izquierda, hacia la derecha para averiguar cuál es la etiqueta en realidad. Ahora, a veces estamos colocando realmente poniendo el atributo de marcador de posición, que a veces puede ser un poco difícil. Sólo porque simplemente tal vez no sepas lo que están escribiendo y si se ven interrumpidos o distraídos. Entonces, tal vez sea realmente bueno o una mala idea poner realmente etiquetas planas por encima de los campos. Otra cosa es que a veces es realmente difícil obtener retroalimentación visual, simplemente no sabes si los datos han sido enviados o no. Por lo tanto, siempre habilita para desactivar el botón inmediatamente al hacer clic. Entonces, los usuarios tienen una muy buena retroalimentación visual de inmediato. También podemos usar validación de formularios en línea por supuesto. Pero podemos usarlo en diferentes lugares. Entonces, sobre todo, cuando se trata de contraseña es mejor tenerla realmente después se deja
un campo lo que indica que el usuario ha enviado y terminado su entrada. A veces, podría ser una buena idea hacerlo realmente sobre la marcha, ¿no? Depende. También desactiva la autocorrección porque realmente puede producir errores. Deshabilitarlo en las direcciones de correo electrónico porque de lo contrario podría terminar con una entrada muy extraña. Deshabilitar correo electrónico de mayúsculas automático por ejemplo, o en otras áreas que no lo requieran absolutamente. También, por supuesto, utilice la distribución adecuada del teclado. Es decir, no tiene sentido sacar un teclado de email si usas una barra lateral para escribir dígitos en tu entrada de número telefónico, ¿verdad? Entonces, solo ten cuidado con esto. Desafortunadamente, la mayoría de las formas son sin embargo todavía extremadamente aburridas. Este donde realmente tienes que escribir el carácter corchetes izquierdo en los campos de entrada para enviar los datos. Otros son simplemente malvados como éste. Hemos hecho para asegurarnos de que estemos convenientemente ubicados entre Dinamarca y Finlandia en contador selector, cual tienes que seleccionar si no quieres agregar costos de seguro a tu factura, o simplemente tan aburrido como esta. Pero lo más importante, el problema es que estas formas realmente no piensan en la interacción real, piensan en la estructura. Esta es una parte difícil porque rellenar un formulario como este es realmente difícil en el dispositivo móvil. Requiere mucho esfuerzo, muchos grifos, y en realidad simplemente no es forma cómoda de hacerlo. Entonces, y si pensáramos en diseñar mejores formas un poco diferente. A lo mejor más así donde, del
lado izquierdo claramente tienes una forma. Tiene una estructura de plataforma realmente clara, sencilla, familiar para nosotros y se siente como forma también. Entonces, si diseñas esto estás diseñando un formulario. Pero a la derecha estás diseñando una interfaz. En realidad es la misma entrada. La única diferencia es que se te requiere como usuario para editar, hacer clic en elementos específicos para editarlos, ¿verdad? Entonces cada vez que hayas terminado solo tienes que hacer clic en iniciar en lugar de proceder. Entonces, el correcto se siente un poco más como interfaz y mucho menos como una forma, ¿verdad? Se siente como progreso y no como aburrimiento lo cual es una gran cosa. Ahora, el tipo de forma es también uno de esos enfoques que te ayudan a lograr exactamente eso. Siéntete un poco más como una interfaz y menos como una forma. Entonces, en ese caso, bueno, la idea es enfocarse en la mecanografía todo el tiempo. Entonces, en lugar de realmente mover el mouse alrededor o tocar en todas partes todo el tiempo, deberías estar solo enfocándote en escribir, por lo que escribes. Entonces si quieres pasar de un campo a otro, solo
tienes que presionar enter o seleccionar A, B, C, D. No usas un menú desplegable de selección porque no los usas todos obviamente en el escritorio, solo
usas atajos de teclado todo el tiempo en todas partes. Si quieres pasar de la izquierda a la derecha, del anterior al siguiente campo de entrada, bueno, puedes hacerlo usando los controles de abajo, ¿verdad? Entonces generalmente si puedes evitar esos elementos estructurales realmente aburridos, molestos, como un campo de entrada por ejemplo, puedes hacerlo usando unos elementos de entrada más inteligentes. Por ejemplo, si solo tienes dos opciones como mostrar y ocultar, solo
puedes usar un interruptor para eso,
permitiendo que los usuarios toquen fácilmente y se muevan entre las dos. Si tienes algo así como un rango de precios, correcto, con un mínimo con valor máximo, obvio la diapositiva es una opción mucho mejor para esto. Entonces también si solo quieres dejar que el usuario seleccione un valor específico,
un valor discreto como digamos 1, 2, 3, 4, 5, ¿por qué no solo enumeras todos usando controles
segmentados y dejas que los usuarios los toquen fácilmente. El último que también es bastante importante sobre todo cuando se trata de checar y cosas así, solo un simple paso a paso, permitiendo a los usuarios aumentar o disminuir el valor de, por ejemplo, la cantidad de productos o copias de un libro que quieren comprar, cosas así. Realmente fácil de hacer y realmente, muy servicial. De hecho, los deslizadores en realidad pueden recorrer un largo camino. Por lo tanto, puedes usar diferentes tipos de deslizadores, un solo deslizador y un doble deslizador, deslizador
continuo, deslizadores discretos, y así sucesivamente y así sucesivamente. Los deslizadores continuos son aquellos en los que tienes digamos, valores indeterminados. Precio temperatura y deslizadores discretos de cosas como talla de ropa. Siempre es una buena idea mantener y usar uno
continuo y no evitar cero resultados página. En realidad puedes extender tus deslizadores para hacer más que solo mostrar un rango de valores. Quizás en realidad mostrando meta datos reales sobre el número de opciones que tienes en este rango de precios específico. Entonces, aquí sabes exactamente en función de la altura de las barras, cuántas opciones tienes. Podría ser una buena idea quizás agregarle algún contexto en términos de texto también. También la forma en que distribuyes tu rango de control deslizante podría importar también. Cuidado con asegurarte de que siempre
tienes aproximadamente la misma cantidad de artículos en cada rango de precios. De esa forma deberías asegurarte de que los usuarios
nunca terminarán con cero página de resultados todos juntos, muy como lo hace Airbnb, donde tienes exactamente esa barra legal en la parte posterior. Entonces, para resumir aquí. Bueno, básicamente podemos tratar de hacer que todas las formas se sientan un poco menos como formas y un poco más como interfaz
real usando esos elementos de interfaz tradicionales como deslizadores, como alternadores, como conmutadores, para realmente alejarse de los campos de entrada y seleccionar barras, seleccionar desplegables todos por completo. Cuanto menos los utilicemos, mejor será la experiencia. Entonces, esto no es tan difícil, pero realmente puede marcar una gran diferencia.
8. Formularios web (parte II): Entonces, solo unas cuantas modificaciones menores como vimos en la última parte, podemos asegurarnos de que tal vez tu formulario realmente no se sienta como una forma, tal vez más como una interfaz. Simplemente son realmente menores, pero hay un poco de diferencia. Ahora bien, si realmente lo pones todo junto, podrías terminar con una interfaz como esta. Por lo tanto, quieres tener unos cuantos desplegables selectos selectos selectos selectos selectos, que son realmente cómodos de tocar. Podría terminar con algunos controles segmentados, como éste. Podrías terminar con botones realmente prominentes que son tan fáciles de hacer clic, que moverse entre la caja ya no se sienta como un gran problema. Es cómodo, pero al final aún terminas con esos campos de entrada, y no hay mucho que puedas hacer al respecto. Todavía necesitas escribir datos. Sí, puedes usar esos botones de radio de lujo como lo hacen aquí, pero al final, todavía
se siente como trabajo. A lo mejor si realmente podemos evitar por completo los campos de entrada , funcionaría, pero necesitamos escribir datos. Entonces, echemos un vistazo a algunos otros ejemplos de cómo realmente puedes evitar esos campos de entrada, y hacerlos un poco mejores, si necesitas usarlos. Entonces, una de ellas es, por supuesto, siempre que tengas algún ítem secundario, dirección, dirección
opcional o cualquier entrada telefónica opcional o lo que sea, si sabes que no necesariamente los necesitas, no los muestres por defecto. Usa algo como divulgación progresiva, como con el botón más o lo que sea que realmente lo mostrara, hazlos aparecer en el click, porque realmente no los necesitas. Otra cosa es que en realidad tienes muchos datos sensibles que estás pidiendo. Bueno, ¿por qué no le explicas a los usuarios por qué necesitas estos datos? Ya sea entrada telefónica, o dirección de correo electrónico, o cualquier otra cosa, solo proporciona algún tipo de pequeña pista para realmente tranquilizarles por qué realmente necesitas estos datos, porque podría estar muy bien que simplemente no conozcan el razones por las que lo necesitas. Otra cosa es la dirección de correo electrónico. Ahora, sabemos que la dirección de correo electrónico es uno de esos ítems críticos
que siempre tienes en el e-commerce y es realmente importante tener. Pero si tienes una dirección de correo electrónico incorrecta, es como si el cliente nunca existiera. Entonces, tal vez en realidad puedas hacer la entrada un poco más fácil. Entonces, siempre que los usuarios escriban algo, bueno, tal vez puedas proporcionar algo como autocompletar,
auto-sugerir, con los proveedores de correo electrónico comunes que, acuerdo a tu base de datos, son muy utilizados por los usuarios. A lo mejor es Facebook, a lo mejor es Gmail. Pero si alguien realmente tipea en Gmail, es realmente mucho más fácil para ellos corregir porque simplemente pueden tabular, no realmente un gran problema. Eso es realmente, realmente cómodo. La otra forma de mejorarlo realmente también es pedir a los usuarios que verifiquen su correo electrónico justo antes de enviar su pedido o antes de enviar su formulario de comentarios, solo para asegurarse de que realmente proporcionaron la dirección de correo electrónico. Porque el problema real es que la mayoría de los usuarios, cuando se les pide que vuelvan a escribir la dirección de correo electrónico en el campo de entrada, utilizan copiar pegar. De hecho, el 60 por ciento de los usuarios según la investigación de Baymard, copia
consistentemente pega la dirección de correo electrónico en lugar de volver a escribir el correo electrónico. Entonces, no es buena idea tenerlo realmente porque la mayoría de la gente no lo usa de todos modos. Entonces, si cometieron un error en primer lugar, lo
repetirán porque copian pasta de todos modos. Por lo tanto, eliminar por completo el campo de verificación de correo electrónico. No lo necesitas. En cambio tal vez podrías usar autocompletar en línea, realmente verificando en línea que es correcto, o simplemente tener una página de revisión donde se está preguntando. Muy a menudo terminas con situaciones en las que tienes posicionadores para ahorrar espacio, sobre todo en el móvil. Bueno, el problema con los placeholders es que cuando la gente empieza a escribir, desaparecen. Entonces, esto es un gran problema porque en realidad pierden contextos. Entonces, en realidad puedes tener ambos. Entonces, SP empezará a escribir, en realidad
puedes empujar este título un poco a la parte superior. Entonces, no es tan prominente pero sigue disponible, por lo que no se pierde. Esos insumos, o esas etiquetas, también
pueden ser sensibles. Entonces, si no tienes espacio para mostrarlo en la parte superior, realidad
puedes mostrarlos a la derecha o cuando sea. Entonces, puedes ser realmente flexible en esto. la misma manera que con textarea. Todas esas pequeñas cosas realmente pueden resumir, así que cuando se resumen, hacer la diferencia. Entonces, aquí si realmente comienzas a escribir, el tamaño de textarea aumenta automáticamente. Entonces, no es necesario reservar ocho o 10 líneas para textarea. Se puede ser más flexible en esto. Nuevamente, reduzca la altura total de la forma. Cuando se trata de año de entrada de nacimiento, bueno, a veces no se necesita la fecha exacta, tal vez sólo se necesita el año. Entonces, pregunta por año. No necesitas dos entradas extra para el mes y para la fecha. También, lo mismo vale para el selector de país, que puede ser interminable, casi interminable ,
sentirse como interminable, donde podría terminar simplemente sin saber dónde encontrar a su país. Si eres de Holanda, o eres de Holanda o Holanda o Holanda o tal vez tu país tiene prioridad en el selector de país. Entonces, solo puedes pedir a los usuarios que escriban los dos primeros, tres caracteres de su país. Eso no es realmente gran cosa y a medida que escriben, se pueden reconocer los sinónimos en la parte posterior. Entonces, no importa si escriben CH, Schwei o Suiza. O si escriben DE, Deutschland o Alemania, puedes darte cuenta de que de todos modos es lo mismo, y es mucho más fácil de rellenar. De hecho hablando de países, a veces no es muy necesario pedir ciudades en absoluto porque se puede pedir un código postal. De hecho aquí hay un pequeño estudio que muestra que una vez, si estás pidiendo a los usuarios código postal primero y luego pre-llenar ciudad y estado automáticamente, en promedio, la tasa de finalización es mucho mayor porque lo vas a predecir correctamente basado en bibliotecas como Zippopotam.us, por ejemplo. Entonces, a medida que comienzas a escribir, medida que escribes tu código ZIP en realidad puedes pre-llenar la ciudad y el estado para que los usuarios no tengan que escribirlo por completo. Por supuesto el rey de los campos de entrada, que es la corona de los formularios web aquí son los campos de entrada de tarjetas de crédito. A veces estos formularios son realmente difíciles de escribir porque te preguntan si es MasterCard o Visa, y tienes muchos campos de entrada por los que tienes que pasar. ¿ Y si lo combinamos todo en uno? Entonces, en este caso solo preguntas, ¿cuál es tu tarjeta de crédito? Por favor ingrese su número de tarjeta de crédito, sólo se ve en el, pista en la parte inferior. Entonces solo empieza a escribir. Bueno, en realidad se puede reconocer en la parte de atrás lo que es, ya sea Visa o MasterCard o cualquier otra cosa. Una vez que tienes esta entrada,
bueno, se desliza hacia un lado, y sigue escribiendo. Entonces, observe que la notificación en la parte inferior insinúa este cambio. Entonces, ya sabes lo que estás escribiendo, y luego siempre que tengas algo que requiera algún tipo de retroalimentación, retroalimentación
visual, también puedes cambiar el ícono también. Aquí en este caso, proporciona EV y luego finalmente código ZIP, y algún punto si todo está correcto, eso está bien, eso es luz verde. Es mucho más simple un campo de entrada que solo funciona y realmente no es tan grande. Ahora, ¿qué significa? Bueno, si puedes evitar interacciones complejas, si puedes evitar campos de entrada complejos, realmente molestos, como seleccionar desplegable por ejemplo, por favor haz eso. En general, si puede habilitar a un usuario para que proporcione algún tipo de entrada con un toque o un solo clic, busque eso. Si puedes simplificar, obviamente si puedes simplificar algunos elementos formales haz eso. Prefiere botones de radio, alternadores y deslizadores solo porque son
mucho más fáciles de manipular en un dispositivo móvil. Si no necesitas campos específicos, campos de entrada, campos
secundarios, no necesitas mostrarlos de inmediato. Mostrarlos como revelación progresiva. Utilice patrón de etiqueta flotante para realmente nunca perder el contexto de lo que los usuarios están escribiendo. También porque la mayoría de las personas están copiando y pegando correo electrónico de todos modos, solo evita la verificación del correo electrónico, usa algo como verificación en línea o simplemente pídeles más tarde que verifiquen la dirección de correo electrónico. Siempre que tengas una entrada larga, piensa en formas comunes más simples de
reducir realmente esta complejidad en algo un poco más manejable. También hacer uso del código postal. Una vez que pidas el código postal puedes pre-llenar una gran cantidad de datos del mismo. En general, solo considera usar entrada en lugar de porque en la mayoría de los casos realmente no necesitas un desplegable por completo, especialmente para cosas como selector de país, simplemente no lo necesitas. De esta forma, con solo usar estas pequeñas reglas básicas, realmente
puedes asegurarte de que siempre que tengas un campo de entrada, realmente sirve a un propósito, y tus formularios serán realmente mucho más cortos al final, y los usuarios ojalá, sea mucho más feliz.
9. Ajuste de microcomponentes (parte I): Entonces, algunos de los componentes de los que
hablamos se van a utilizar en casi todos los proyectos, en cada proyecto responsive. Piensa en la navegación o incluso quizá en las tablas. Pero algunos de ellos podrían no ser utilizados en absoluto, o muy raramente. Ahora el problema es, sin embargo, si no has estado pensando en cómo encaja un componente específico dentro del contexto, podrías terminar con situaciones realmente difíciles. Entonces, algunos de esos componentes son realmente difíciles de manejar una vez que todo lo demás está configurado. Entonces, echemos un vistazo a algunos de esos micro componentes que podrías necesitar, pero probablemente no necesites todo el tiempo. Entonces, cuando piensas en los componentes a un nivel muy estratégico, es una buena manera de pensarlo como niveles de experiencias. tanto que Patty Toland habló en uno para pláticas para el grupo Filament, dijo que podemos pensar en diseñar componentes responsivos en cuanto estratificar diversos niveles de experiencias y funcionalidad. Empezamos como una capa funcional, y nivelamos hasta niveles más mejorados para cada componente, y para todo conjunto de componentes. Entonces, empezamos con algo realmente básico que en realidad solo necesitamos. Empezamos con la velocidad, lean, asegurándonos de que el componente web que estamos construyendo sea delgado, rápido, y realmente está muy optimizado. Además de eso, nos aseguramos de que sea un accesible totalmente funcional en toda la gama de pantallas y dispositivos. Entonces una vez que tengamos eso, en realidad
podemos empezar a hablar de la estructura y cómo cambiará realmente el componente dependiendo de las rejillas, del punto de ruptura, del orden y el diseño. Y entonces en realidad una vez que tengamos eso, cuando sabemos exactamente cuál es el comportamiento receptivo de este componente, puedes pensar en la decoración en cuanto a estilo o marca de logotipo, colores, fuentes y así sucesivamente. Por lo que siempre piensa primero en esta pirámide cuando realmente estás diseñando un componente personalizado. Digamos que hay que diseñar una línea de tiempo. Ahora, la línea de tiempo no es gran cosa, bueno normalmente solo tienes una línea de tiempo y te pegas a ella. Puede ser horizontal, puede ser vertical. En este caso, en realidad podemos jugar un poco con la topografía, un poco con el tamaño de la fuente, y el relleno. No debía- mantenemos esta bonita línea de tiempo, y en realidad probablemente podríamos mantenerlo todo alejado, pero entonces la experiencia de lectura real podría no ser buena porque la alineación será demasiado corta. Entonces, en este caso puedes simplemente convertirlo en algo un poco diferente como una visión general de esos artículos que funciona bien también. Cuando se trata de gráficos o gráficos, no
es tan difícil o básicamente son solo elementos mediáticos, por lo que puedes simplemente exprimirlos en el espacio móvil. Pero tienes que asegurarte de que esas gráficas circulares o lo que sea que estés usando, sigan siendo lo suficientemente grandes. Por lo que en realidad es posible que necesites hacerlos más grandes, no pequeños para el espacio móvil. Y ahora, todas esas interacciones, por supuesto, tendrán que estar todavía en su lugar. Y también al mismo tiempo, a veces podrías tener esos elementos animados. Entonces, realmente podrías repensar el grosor de las líneas y cómo se dibujan dependiendo de lo que quieras diseñar. Ahora, aquí hay un bonito caso práctico de Globe y Mail, de Teehan Lax, quien diseña Global Mail, y están hablando mucho de los diseños de componentes financieros, específicamente para los mercados de valores. Y otra vez pensando en infografías y gráficos, y en realidad se consideran todas
las diferentes vistas y también específicamente etiquetas porque en esta posición, al fundir para gráficos, posición de etiquetas, y el color de las etiquetas puede ser dramáticamente importante. Porque quieres asegurarte de que esta infografía se vea bien tanto en una pantalla de mala calidad como en una pantalla de buena calidad. Entonces, piensa no sólo en el grosor de las líneas, sino también en las etiquetas y en dónde las posicionas, y por supuesto el nivel de fidelidad tendrá que cambiar. En ocasiones, se puede mostrar exactamente lo mismo tanto en el móvil como en el escritorio, y también los colores a escoger, por ejemplo los colores de fondo, puede marcar una gran diferencia. mapas en general son un gran problema, porque cuando tienes un mapa, y usas por ejemplo el mapa y el mapa CG como filtro, tal vez estados como filtros como lo haces aquí, y funciona bien en escritorio pero realmente no funciona en el móvil en absoluto, debido a un problema de dedos gordos no eres capaz de tocar un estado específico especialmente si su tamaño no es lo suficientemente grande. Es solo que realmente es gran cosa. Al volver a esta estratificación de la que hablamos al principio,
bueno, ¿por qué en realidad no empezamos con algo funcional, como un desplegable selecto, como puedes ver aquí? Y luego hacer estándares y mejorarlo a algo un poco más significativo para pantallas más grandes. Menos como un mapa real donde realmente
puedes tocar y seleccionar lo que quieras seleccionar. Con los mapas en general, realidad
puedes ir un poco más lejos y si tienes un área realmente pequeña que los usuarios podrían querer seleccionar, solo déjales seleccionar varios países a la vez, y luego pedir una pequeña lista todos ustedes para permitirles seleccionar
realmente la parte específica que quieren tener seleccionada. Algo realmente pequeño, pero puede ser bastante, bastante útil de hecho. Pero no es necesario cargar el mapa de frente todo el tiempo. Debido a que sabes que tienes muchos mapas en tu diseño, podrías terminar con los usuarios en realidad desplazando hacia abajo de nuevo directamente al mapa, que probablemente no es lo que quieres. Entonces, en ese caso lo que puedes hacer, es realmente proporcionar una imagen, solo una imagen del mapa, una captura de pantalla del mapa si quieres, con un enlace a Google Maps o cualquier servicio de mapas que estés usando. Entonces si sabes que la mayor parte del espacio de pantalla está disponible, ancho de
pantalla está disponible, en realidad
podemos mostrar el iFrame real. Correcto. Pero no necesitas mostrarlo en el espacio normal todo el tiempo, y tener cargando condicionalmente el mapa el iFrame cuando lo necesites, y simplemente mostrando un enlace cuando no lo necesitas. Lo mismo vale para las cajas de luz también en realidad, porque muy a menudo haces clic en una imagen, o tocas una imagen en la página, y luego tienes una imagen y en realidad el tamaño más pequeño, aunque se supone que es un caja de luz. Entonces, solo muestra la imagen en una pequeña vista. Correcto. Con un enlace a la vista grande real, gente
pueda acercar y alejar si es así, luego mostrar y cargar la caja de luz condicional de manera más condicional. Sólo cuando lo necesitas porque realmente no es necesario todo el tiempo. Está bien. Entonces, ¿qué podemos aprender de esto? Bueno en general, piensa en esta pirámide todo el camino, piensa en la velocidad y el acceso que viene primero, asegúrate de que estás bien ahí, y entonces realmente puedes usar escala y estilo más adelante para crear realmente hermosas experiencias receptivas ricas. Ahora bien, voltear o cambiar de dirección no es lo suficientemente bueno en la mayoría de los casos. Es decir, ajustar de escritorio a móvil, que lamentablemente es lo que haremos la mayor parte del tiempo, puede ser bastante difícil. No es solo ajustar el diseño, piensa en cambiar el nivel de fidelidad cambiando las diferentes vistas ya que es una infografía de cualquier componente personalizado. También cuando se trata de mapas y cajas de luz, piensa en la carga condicional de esos iFrames, y si no puedes asegurarte de que el usuario se sienta cómodo con la selección de una pequeña entrada,
bueno, solo tienes que avisar el vista de lista en tap, por lo que realmente pueden especificar la entrada cuando sea necesario. Pero en general, una vez que tengas todo esto en mente, puedes asegurarte de que todos esos componentes, cuando entren, se puedan tratar de manera efectiva y eficiente. Entonces, los usuarios no tienen que esperar, y aún tienen muy buena experiencia navegando por tu sitio.
10. Ajuste de microcomponentes (parte II): En la sección anterior, hablamos de unos microcomponentes visuales, ¿no? Cosas como mapas, cosas como cajas de luz, que en realidad tienen un elemento mediático en ellos. Entonces, eso los hace realmente bastante presentes. Al mismo tiempo, hay muchos componentes estructurales que podrían no estar tan prominentemente posicionados. Bueno, depende como veremos en un segundo, pero eso en realidad puede requerir mucho más trabajo a tener en cuenta, sobre
todo cuando se piensa en pan rallado, todos esos pequeños detalles. Entonces, veamos algunos de ellos. Entonces, realmente creo que si un problema de diseño se puede resolver de manera responsiva, eventualmente, se resolverá de manera responsiva. El problema es que tendemos a pasar por alto. Pasar por alto algo tan grande como prominente como un carrusel. ¿ Verdad? Ahora, hablamos de los visuales en la anterior, pero aquí, lo que realmente importa es la estructura real del carrusel. Ahora, muy a menudo, si simplemente abstraemos de la presentación real, contiene algunos errores y algunos puntos en el medio,
lo cual se supone que representa el progreso, tipo de qué paso estás en este momento, y muy a menudo están realmente mal diseñados. Al igual que este es probablemente uno de los peores ejemplos, donde tienes una gran imagen realmente prominente en el medio, y luego estos pequeños puntos que se supone que son tus ítems de navegación. ¿ Verdad? Esta es la forma en que navegas. Esto simplemente no es muy conveniente, razón por la
cual muchos diseñadores tienden a alejarse de los carruseles. Por ejemplo, esto aquí, se
puede presentar como un carrusel, y a menudo se basa en datos, en datos sólidos. Porque si miras cuántas personas están usando realmente carrusel, para ser más específicos, cuántas personas realmente ven imagen dos, tres, cuatro y así sucesivamente, terminarás con sorprendentemente un número bajo, ¿verdad? Se trata de tal vez de dos a tres por ciento para la posición 2,
posición 3 , posición 4, posición 5, que en realidad no es gran cosa. Eso no es mucha gente. Obviamente, una especie de convertir un carrusel en un generador de imágenes aleatorias, desplazándose por las posiciones, realmente
no ayuda, sólo porque la gente no navega con él. Entonces, podemos hacerlo mejor, tal vez como lo hace Amazon, donde en lugar de solo mostrar flechas y puntos, proporcionan algún contexto. ¿ Por qué la gente debería hacer clic en él? Proporcionar algo así como una miniatura o un texto, lo
que realmente facilita a los usuarios seguir adelante y hacer clic en una de esas cajas para obtener más información sobre un producto, o una oferta o lo que tengas. Es muy útil solo para proporcionar algún contexto. Otra cosa son las migas de pan, así que debo avanzar pasos. Si se echa un vistazo en el escritorio,
bueno, está perfectamente bien mostrar todos los pasos que el usuario tendrá que seguir. Pero a veces, sólo puedo reducirlo a texto
simple como se puede ver aquí en la esquina superior izquierda. Simplemente mostramos el paso uno de cinco, y nombramos el paso, y eso es más o menos todo. Así de sencillo puede ser. Entonces, si el usuario se mueve al segundo, tercero, y así sucesivamente paso, simplemente cambia el texto en consecuencia. Realmente no es gran cosa. Ahora, esos pasos de progreso pueden ser realmente tan simples como el anterior, o un poco más difíciles. Aquí, es donde realmente se desplaza hacia abajo el texto. En realidad se puede proporcionar algún contexto sobre lo lejos que ha llegado a la lectura, o terminó de leer esta sección de un artículo, lo cual es realmente bastante útil. Otra cosa en una configuración muy diferente son las cajas de comercio electrónico. Bueno, aquí de nuevo, tienes tu tarjeta de la compra, y luego como en realidad vas a la caja, lo que ves es que, en lugar de tener realmente estos pasos de progreso, actúan como pestañas. Entonces, puedes moverte entre el envío, y la facturación, y revisar muy rápidamente, porque en realidad actúan prácticamente como pasos, lo cual también es bastante conveniente. Realmente no necesitas mostrar solo en el texto si puedes. Lo mismo vale para, si tienes una selección de vuelo o algo así. Ahora bien, las migas de pan no tienen que parecer migas de pan aquí. Por ejemplo, puedes volver a tener cosas como un pequeño toggle que te permite mostrar, para ver todo en toda la vista. Pero por defecto, podrías tener una vista compacta muy simple, sin distraer en absoluto al usuario. Otra cosa muy importante a tener en cuenta es que, tendemos a olvidarnos del carrusel de medios verticales. Ahora bien, el carrusel vertical suele ser muy importante, porque, el ancho de la pantalla, el ancho del diseño puede ser realmente diferente. Porque solo podrías tener una pantalla grande, una pantalla pequeña, pero el ancho por sí solo no dice realmente como si se trata de un dispositivo móvil o no. Si bien la altura, podría ser un muy buen indicador de que
en realidad es un dispositivo móvil o no un dispositivo móvil. Entonces, piensa en las vistas de la música vasco móvil. Especialmente, si tienes algo como esta navegación, donde tienes algunos ítems apareciendo. Bueno, al hacer clic en un icono, esto no es muy escalado porque en algún momento, esto simplemente ya no será visible. Será muy difícil navegar. Entonces, tal vez en realidad podrías pensar en usar acordeón basado en la altura. Entonces, si sabes que no hay nada de altura que mostrar, todos los elementos en realidad todavía pueden usar más, y tipo de espectáculo como el MoorLink, y mostrar las secciones en partes. Puede ser bastante útil. Ahora, dibuja las comparaciones. Obviamente, en el móvil, no tienes mucho espacio. Entonces, ¿qué necesitas hacer? Bueno, la única opción que tienes es usar realmente altura completa para pantalla completa básicamente. Al ser el usuario, haga clic en comparar, solo ocupe todo el espacio disponible con esta caja de diapositivas para facilitarle la comparación. También, notas al pie, y notas al margen, y diseños de revistas. Entonces, muy a menudo terminas con incómodas notas al pie de página
en algún lugar de la parte inferior donde tienes que saltar por ahí que eso para saltar atrás, o notas al margen que en realidad se aprieta entre dos párrafos. Bueno, tal vez podrías usar algo así como notas al margen en línea, o como puedes ver aquí, cuando hay un toque en este ícono, realidad
puedes obtener información sobre la nota al margen específica, y podría aparecer en el fondo o podría aparecer en la parte superior, realmente depende de ti. Pero intenta ponerlo en contexto. No hace falta que la gente salte de un lugar a otro. Lo mismo vale para los PDF también, porque los PDFs son realmente molestos. Es decir, necesitas descargar todo el archivo PDF si quieres leer la página 18. Esto no es realmente genial. Entonces, tal vez podrías realmente mostrar con tus miniaturas. Entonces, si la gente quiere descargar el archivo PDF, creo que en realidad pueden seguir adelante y descargarlo, pero puede ser un humax, por lo que podría tomar un tiempo. Al mismo tiempo, solo proporciona algo así como vistas en miniatura realmente pequeñas, miniaturas
realmente optimizadas, así que si la gente quiere simplemente llegar a la página 17 por ejemplo, pueden llegar con 50 o 40 kilobyte sin tener que descargar todo el PDF. Entonces, los carruseles no están mal. No son muy diferentes a los acordeones, solo un poco más diferentes en la revelación anterior. Necesitan contextos sin embargo, por lo que, proporcionan algún contexto, algunos detalles significativos para que la gente se incline a ir de un área a otra. migas de pan pueden ser pestañas o acordeones, o tan simples como el texto sin formato. Usa consultas de medios verticales, porque a menudo son muy buenos indicador de que tienes un dispositivo móvil. Mostrar comparaciones de productos a pantalla completa, porque no hay otra manera de evitar realmente. En lugar de poner notas al margen,
o en realidad notas al pie en la parte inferior, tal vez puedas en realidad insertarlas justo en el contenido, y al mismo tiempo, lo que tienes que lidiar con muchos archivos PDF. Proporcionar miniaturas muy optimizadas, algunas personas en realidad no pueden acceder a ellas muy rápidamente. Eso también puede recorrer un largo camino. Correcto. Entonces, a continuación, vamos a hablar de imágenes, específicamente sobre el escalado responsive up. Cómo podemos utilizar todo el espacio disponible para hacer lo mejor para nuestros diseños.
11. Redimensionamiento responsivo: Cuando nos ocupamos del diseño responsive, por lo general tenemos esta sencilla intención de ir del espacio de escritorio al espacio móvil. Nos estamos moviendo entre estos dos espacios. Si bien al mismo tiempo, es realmente importante para nosotros considerar, no sólo en el propio espacio móvil que es obviamente crucial e importante, sino también este gran display, pantallas grandes espacio. Entonces, sí optimizamos mucho desde el escritorio hasta el móvil, pero tal vez deberíamos estar optimizando desde el escritorio hasta ese gran espacio también, porque nos brindan muchas oportunidades para hacer experiencia para que lo usaremos mucho mejor. Entonces, veamos algunas de esas formas. Ahora, como escribió Mike Pick en uno de sus artículos analista aparte, “Al abrazar las últimas pantallas, podemos tener la oportunidad o aprovechar la oportunidad de trabajar dentro de un pliegue más grande, presentando a los usuarios con más contenido simultáneamente, lección desplazándose por páginas más largas, y crear una experiencia de usuario más rica y expansiva”. Ahora, eso brinda muchas ventajas, porque si piensas en la visión general que tienes si vas a un sitio de comercio electrónico aleatorio, así es como se va a sentir la experiencia. No solo es cierto para ti con mucho espacio en blanco en todas partes, no solo
es cierto para el comercio electrónico, va a ser muy similar en los periódicos. Aquí tenemos MSNBC, que es totalmente receptiva desde este auto móvil, pero no tanto cuando vas más arriba en absoluto. Lo mismo vale para quartz.com también, donde podríamos tener esta imagen grande realmente prominente en la parte superior, y una columna muy diminuta donde reside el contenido. Entonces, tal vez podamos hacerlo un poco mejor. Entonces, algunas ideas para el comercio electrónico específicamente representadas por los institutos BioMart en uno de los artículos de la revista Smashing, y las ideas son muy simples, y son realmente simples de implementar también. Simplemente hace uso del espacio realmente, eso es más o menos. Entonces, si puedes mostrar cinco ítems por fila, solo tienes que mostrar cinco ítems por fila a medida que
aumentas la cantidad de ítems que puedes mostrar en tu cuadrícula. También proporcionar algo así como cosas críticas muy importantes como el orden, por lo que visión general de los pedidos o el acceso a su cuenta, o la línea directa de soporte. Muy sutil de una manera muy sutil, pero en algún lugar de la derecha o de la izquierda para que los usuarios siempre puedan tener acceso a ella. Si tienes algo así como una imagen realmente prominente que quieres resaltar, en lugar de hacerlos pequeños dentro de la cuadrícula, deja que simplemente rompa la cuadrícula y muéstralos de manera muy prominente. También el botón Agregar al carrito o el botón Pagar podría ser realmente crítico tener en cuenta, buscar, mantener disponible todo el tiempo. Filtros, hablamos de rellenos en secciones de litigio, una sección donde si tienes muchos filtros, es posible que quieras usar pestañas potencialmente para presentarlas en la parte inferior de la pantalla, por lo que cuando los usuarios hacen clic en
ellos, tener un poco de minerales pop, pero si tienes mucha seguridad, solo
puedes mostrar los filtros. Entonces, aquí puedes tener un tipo de filtros de color, filtros de
tamaño, y así sucesivamente. Tan solo estar presente así como el usuario se está desplazando por la página, en realidad
pueden tener acceso para filtrar aún, porque los filtros los filtros se están desplazando con ellos. Lo mismo vale para los artículos vistos recientemente y Agregar al carrito en la página de revisión, y también Resumen de pedidos, por ejemplo, que solo suele saltar hacia abajo al fondo del paciente en vista móvil. Todo debe estar presente. Ahora, la idea es, bueno, ¿y si tienes una fuerte presencia visual como pesada? Entonces, si tienes alguna imagen de fondo visual, lo que siempre puedes hacer es solo extender un poco. En una vista móvil puede que no tenga un espacio para mostrarlo, pero ciertamente sí agrandar vista. Entonces, solo puedes usar el espacio, usar un color para mostrarlo.Esto es
más o menos lo mismo en todo el fondo al lado que tienen fondo. Siempre se puede extender un poco el fondo, para que no se sienta tan perdido. Ahora bien, hay pocos ejemplos interesantes de lo que realmente se puede hacer con él. Uno de mis favoritos es UNIQLO porque en lugar de solo tener unos cuantos ítems, un número restringido de ítems que se muestran por fila, en realidad sí
escalan. Entonces a veces podrías tener uno, dos, artículos pero a veces podrías tener seis, siete, ocho, y así sucesivamente, lo
cual tiene sentido, convierte una visión general del producto en una pared del producto, lo cual es útil hacer. Furtado, furtado de bicicleta, en realidad muestran una imagen grande, prominente de un producto que están vendiendo. Es posible que no necesites mostrar el producto tan grande, pero va en la dirección correcta, solo
usan el espacio disponible. El gran descontento es una revista, y sí tienen un bonito diseño de cuadrícula de revista, pero también siempre utilizan todo el espacio disponible. Entonces, una imagen va a ser realmente grande a la vista grande, lo cool va a ser, la topografía va a ser,
se va a sentir muy revista, porque no hay de ancho máximo del todo. Si desplaza, o baja y reduce el tamaño, mientras aún tienen la misma experiencia, por
supuesto solo las imágenes un poco más pequeñas. Pero es realmente agradable tener consistencia en cómo se hacen pequeños, cómo se hacen grandes. A veces podrías tener unas ilustraciones realmente complejas que son fáciles de escalar hacia arriba y hacia abajo. Entonces, aquí tienes todas esas ilustraciones y no importa qué altura o ancho tengas, tal vez termines tener display a pantalla completa, solo
se muestra todo el tiempo, tiene
sentido aunque la topografía podría ser un poco más grande. Pero mi ejemplo favorito de lejos es el ejemplo del sitio web del Kremlin, donde si tienes mucho espacio, bueno, sí
tienes este diseño de doble panel si quieres, donde tienes unos resultados de búsqueda a la izquierda, y tienes el contenido de esa página de la derecha, lo cual tiene sentido, es útil. Al mismo tiempo si no tienes el espacio, solo
va a ser una superposición. Entonces, tienes que cerrarlo y luego pasas al siguiente. Pero si sí tienes espacio, es realmente agradable darse cuenta de navegar porque aquí se puede abrir uno, y luego se puede abrir otro, y realmente se puede tener esta doble vista. Entonces, tiene sentido. Ahora bien, para resumir ¿qué podemos hacer? Si bien hay algunas opciones obviamente. En primer lugar, necesitamos ampliar el diseño para llenar la pantalla. De lo contrario, el usuario podría sentirse perdido
si tiene demasiada pantalla ancha y la izquierda a la derecha, y la topografía es pequeña. Las notas al pie y las notas al margen, especialmente en los diseños de revistas, en realidad
pueden saltar por un lado a la izquierda o a la derecha, porque se puede hacer uso del espacio disponible. También puedes considerar el diseño de varias columnas, varios paneles como el Kremlin o Tradus. Vas a extender las rejillas de productos, como lo hace UNIQLO, donde solo muestras más productos si tienes espacio para ello. Pero lo más importante es traer acciones importantes al foco, por lo que cosas como Agregar al carrito o Checkout, como estos botones críticos, siempre se
pueden presentar de una manera muy agradable, tal vez sutil, tal vez no tan sutil, para que los usuarios siempre puedan tener acceso a ellos, porque una vez que tengas eso, los usuarios no se sentirán perdidos, y eso es algo realmente bueno.
12. Diseño de interfases responsivas complejas: Entonces, a veces, sabes exactamente qué tipo de componentes necesitarás. Pero a veces, estás consiguiendo un proyecto, un proyecto raro, y tienes que trabajar en él. Se requiere que realmente se ponga creativo y que descubra una forma de cómo hacer que las cosas funcionen. No algo que pueda ser simplemente loco, tal vez de repente trabajas en un proyecto japonés con lenguaje que no entiendes o tal vez necesitas construir algún juego muy interesante, interactivo, o algo así. Eso es realizable. Pero, aún en ambos casos, lo que hay que averiguar es cómo crear y hacer que los trabajos alcancen interfaces receptivas. En ocasiones, solo piden soluciones personalizadas. Más a menudo, esas interfaces van a ser muy difíciles y muy complejas, y no tan fáciles como se podría pensar. Entonces, echemos un vistazo a algunos de ellos. Uno de los más prominentes que están disponibles, que está justo en todas partes, es por supuesto el checkout. Podríamos pensar que el checkout es un proceso relativamente sencillo, pero no es porque hay muchos puntos de contacto de checkout con el usuario tienen que pasar. Desde agregar un artículo al carrito,
hasta comprobar la póliza de reembolso, o comprobar las opciones de pago, apoderarse de la dirección de puja o dirección de envío, completar el pago, o tal vez realmente averiguar que la autorización fracaso que no funcionó al final, abandonar el carrito de la compra, iniciar sesión para descargar la factura eventualmente, y luego simplemente terminar todo y esperar lo mejor que obtengan el producto. Es un proceso largo y desafortunadamente, en muchos escenarios, el comercio electrónico se siente muy tedioso y muy aburrido. Entonces, echemos un vistazo a algunos ejemplos de cómo hacerlo mejor. Entonces, aquí hay un buen ejemplo para esto, para una experiencia realmente agradable de comercio electrónico. Entonces, un club de afeitar de dólares, donde no tienen tantos productos, pero sí tienen unos cuantos. Lo que tienen es una capa realmente simple con una página realmente simple, donde tienes opciones gratuitas para elegir desde la vista de escritorio, y la vista más pequeña, bueno, giras este bonito slider, que puedes usar para navegar entre estos tres elementos. Entonces, obviamente puedes agrandar uno de ellos y obtener información al respecto, etcétera y así sucesivamente. Selecciona un artículo potencialmente, y luego se va a agregar al carrito. Además, aún puedes agregarle más cosas. Entonces aquí, podemos ir al siguiente si no queremos nada más. Se puede volver usando sólo dos de uno. También puedes cambiar el número de artículos que quieras elegir. Obviamente, agrega más artículos del hallazgo. ¿ Ves lo rápido que es, y ves lo elegante que es? Es realmente agradable. Todavía tenía esta bonita experiencia de carrito de compras, que es como un pop up, como una caja de luz, pero es realmente agradable. Puede cambiar la cantidad realmente fácilmente. Es solo una experiencia muy agradable, una experiencia muy enfocada. Muy bien entonces, algún punto obviamente, terminarás en el carrito de compras y aquí es donde estarás llenando los datos, escribiendo todos los datos de la tarjeta de crédito, no
voy a comprar esperemos. Hay tan poco, muchos pequeños detalles como dirección de
facturación va a ser lo mismo que la dirección de envío, y este artículo, el ícono va a estar disponible sólo si todo lo demás es correcto. Es solo una experiencia muy agradable para aquí en el sitio de comercio electrónico. Otra experiencia similar está aquí de Harris, donde sí tienes experiencia muy similar pero simplemente muy apretada, muy limpia y agradable. Entonces, a partir de la affordance para botones, y cómo se agrega el artículo al carrito y el tamaño de pick, todo
se acaba de diseñar cómo se supone que debe ser. No tiene por qué ser tan difícil. Durante las opciones de envío y así sucesivamente, así que el pago no es realmente un gran negocio. Además, ten en cuenta que, por ejemplo, cuando quieres corregir errores, te permiten corregir errores, pero no tienes que hacerlo. Entonces, es una interfaz muy agradable muy indulgente. Entonces, si quieres tener un buen ejemplo de una experiencia de comercio electrónico que realmente funciona bien, solo mira estos dos ejemplos, creo que son realmente buenos. Pero a veces, podrías tener obviamente una experiencia muy diferente, como Typekit. Piensa en cualquier interfaz donde tengas un montón de extraño blob de contenido en medio de la página, como esta. Tienes un montón de cajas diferentes, cajas
animadas en realidad, que proporcionan algunas pistas o información flotar. Si tan solo decidiste pegarlo todo en una sola página, esto va a terminar realmente mal. No se va a quedar bien, así que no vas a crear una experiencia agradable con ella. Pero lo que siempre se puede hacer en estos casos es
convertir este blob de datos en algo más manejable como un slider. Ojalá tuviéramos un pequeño toggle por aquí para pasar al anterior y al siguiente, un conjunto de imágenes u opciones, pero esto en realidad se desliza, que puedes deslizar por si quieres, lo cual es realmente bonito. Es una forma realmente sencilla de reducir esta complejidad que tenemos a algo más manejable en vista móvil. Ahora, pero a veces, todavía tienen algo realmente espacio exterior, como éste. Entonces, tienes un pequeño proyecto, proyecto directivo, una pequeña plataforma, donde se supone que los usuarios podrán comprar entradas para espectáculos,
eventos, actuaciones de estadio, lo que sea. Estás deseando no poder simplemente mirar todas las diferentes áreas disponibles, sino también poder acercar a una fila específica donde quieren sentar, y seleccionar el asiento donde realmente quieren sentar, tal vez incluso obtener un vista previa de cómo se va a ver desde ese punto específico. Eso suena como un tema realmente complicado. Entonces, ¿cómo manejarías realmente el diseño de una interfaz como esta? ¿ Cómo lo harías funcionar? Bueno, probablemente terminarás con algo así como, no lo
sé, tal vez alguna de las configuraciones, patrón donde puedas proporcionar, pídanos solo qué rango de precios te gusta, qué tipo de asientos te gustaría prefieren. Además, tal vez hay ofertas calientes específicas que están pasando en áreas específicas, y así sucesivamente. Entonces, al final, lo que podrías hacer
es, ya no está disponible aquí. Selecciono una de estas opciones específicas que te gustan, que son importantes para ti como usuario, o tal vez ajuste algunos filtros como este, y otras configuraciones para minimizar realmente esta complejidad que tienes que mostrar. O bien, podrías terminar diseñando componentes personalizados como este,
donde tienes que lidiar con unos grifos de guitarra interactivos. Entonces, obviamente, tendrás que recalcular el diferente espaciado entre esos diferentes componentes que solo estás jugando en la página, en esas pestañas diferentes. Esto va a ser toda una pesadilla pero si esto es realizable, creo que prácticamente todo es realizable. Si realmente quieres explorar estas diferentes interfaces, bueno, ve adelante a sitios web japoneses o chinos,
porque los sitios web japoneses y chinos están realmente lejos, por delante de lo que estamos. Estamos pensando mucho en optimizar de escritorio a móvil, pero piensan mucho en optimizar para móvil a escritorio porque de todos modos son los primeros en móviles. Entonces, de nuevo, pensando en este blob de datos, o si sí tienen un lenguaje visual diferente, bueno, simplemente puedes aprender mucho de ellos. Al igual que, este blob de datos se convierte en algo manejable como un conjunto de áreas, elementos de
bloque con ilustraciones de clientes puestas en lugar de esas grandes imágenes. Entonces, es una especie de dirección rara si quieres. Lo mismo vale para esta página por aquí, donde tienes muchas áreas y también muchas animaciones pasando. Incluso esas pequeñas infografías o buscadores de caminos, si quieres, todavía se van a mostrar de manera prominente. También son receptivos. Entonces, esas áreas, que podrían no ser tan fáciles de desarrollar y construir, siguen respondiendo también, lo cual es bastante notable. Entonces, terminas con estas experiencias, y puedes aprender mucho sobre la conformidad y cómo usar el agua, etcétera y demás, con solo hacer esto. ¿Qué puedes hacer? Bueno, se puede descomponer la complejidad con sólo tratar de reducir la fidelidad. No necesitas alta fidelidad todo el tiempo. Te puedo preguntar esto, qué es importante para ellos, pedirles sus preferencias, pensar en formas de realmente presentarse mejor para ellos, para en realidad
puedan navegar por esta interfaz. Puedes tener en cuenta lo que es importante y priorizarlo para ellos, realmente estableciendo predeterminados sensibles, predeterminado
inteligente tiene sentido. Cuando estés pensando en esos bloques complejos de datos, piensa en convertirlos en un deslizador, que puede ser fácil de navegar. Cuando pienses en el sitio de comercio electrónico, solo asegúrate de tener esta regla de un solo toque en mente todo el tiempo. Entonces, esos pueden hacer clic, agregar un artículo al carrito realmente fácilmente, cambiar el número de artículos, pagar usando valores predeterminados inteligentes como establecer dirección,
establecer dirección de envío, igual que dirección de facturación, y cosas como esta. Esto realmente puede recorrer un largo camino, y simplemente extendió la conducta de manera significativa, porque una cosa es mostrar un mapa, con asientos y donde la gente realmente puede encontrar un boleto donde quieren sentar, pero es una realidad cosa diferente para crear un asistente agradable que te pediría específicamente todas las preguntas que necesita para proporcionar una salida significativa en eso, y no demasiada salida. Entonces, piensa en las cosas y luego incluso la interfaz más compleja no tiene que sentir que es realmente compleja y realmente difícil de navegar.
13. Reflexiones finales: Ahora ese fue todo un viaje. Si bien echamos un vistazo a muchos componentes diferentes, comenzando desde muy pequeños, tipo de pasar de unos realmente simples como un ícono de hamburguesa y cosas así, a algo un poco más avanzado como mesas y cajas y calendarios y como esa y luego hacia algo realmente avanzado y muy complejo interfaces de usuario. La pregunta es ¿qué hacemos ahora con ella? Ahora, obviamente estoy de nuevo, sólo
quiero asegurarme de que todos estamos en el camino claro aquí. No veo que todas esas técnicas, todas las soluciones como extremos finales para cualquier diseño. No creo que puedas simplemente seguir adelante y tomarlo y aplicarlo a tu proyecto de inmediato y simplemente llamarlo un día. No es así como funciona porque el contexto será diferente en tu escenario. Pero creo que es realmente valioso, realmente útil estar al tanto de todas esas cosas diferentes que puedes hacer cuando te tropiezas con un problema como este. Entonces solo para saber qué tipo de opciones tienes cuando tienes que lidiar con el calendario, cuando tienes que lidiar con mesa, tenemos que lidiar con todas esas cosas diferentes. Entonces llévate todas esas ideas contigo y construye sobre ellas para crear algo nuevo. Y las noticias no son de nuevo como el punto de vista final y el resultado final de lo que estás construyendo sino más bien el iniciador de la conversación para tu proceso de diseño porque esto es esencialmente más o menos así. Esto es lo que es. Y obviamente ahora que tenemos todas esas técnicas en su lugar. No tiene sentido simplemente sentarse y mirarlos, necesitamos ponerlos en práctica. Entonces intentémoslo, descubramos una buena manera de que realmente funcionen dentro de nuestro contexto, dentro del contexto de nuestro pequeño proyecto. Entonces echemos un vistazo al proyecto que también puedes ver en tu pantalla y pensemos en todos los diferentes componentes de los que hemos hablado pero también en los que realmente conforman este diseño de revista del que hablamos, correcto. Trata de identificarlos, trata de diseñarlos adecuadamente, trata de asegurarte de que se sientan bien juntos y trata de
hacerlos realmente sensibles de una manera que realmente se ajuste tanto para pantallas pequeñas, pantallas
muy pequeñas como para pantallas más grandes. Y entonces tal vez en realidad remodelarlos de una manera que funcionara mejor para estos posts no dirigidos que tenemos que diseñar. Ahora, cuando pienso en el diseño responsive, en realidad, tengo esta visión de este record voyager que fue enviado al
espacio en 1977 para comunicarse con extraterrestres, que los alienígenas puedan encontrarnos y hacer lo que quieran con nosotros. Esa es una muy especie de visión optimista, pero está bien. Porque en algún momento alguien tuvo que acudir a un diseñador visual, pedirles que diseñaran un lenguaje visual que resistirá la prueba del tiempo y será diseñado para alienígenas, verdad. Esa es toda una tarea, diría yo. No este pequeño proyecto que tenemos
que diseñar no es tan complicado como ustedes saben, como éste. Pero y en este punto, tenemos que pensar en qué haríamos en apoyo de esta persona. Cómo diseñar algo que aguante la prueba del tiempo durante años y años venideros. Pero como resulta, lo que estamos haciendo hoy con la web no es muy diferente porque podemos elaborar interfaces, podemos elaborar experiencias que tendrán que soportar la prueba del tiempo durante años y años venideros. Porque si son accesibles, si son rápidos, si están creados con un tipo real de mantenimiento en mente, podemos hacerlos realmente, realmente funcionen bien, incluso a 10 o 15 años y ser accesibles y sensible y hermoso al mismo tiempo para que nuestros usuarios realmente, realmente los encuentren encantadores. Con eso en mente, espero que puedan crear esas interfaces. A lo mejor con unas cuantas técnicas que compartimos y discutimos en esta clase. Entonces, quiero agradecer a Simon C Page por la portada para la clase. Tengo una situación de Homero Simpson en alguna parte, no estoy seguro de dónde. El apartado ilustraciones,
las ilustraciones animadas las hizo Guillaume Kurkdjian de Nantes, Francia. Es un asombroso ilustrador. Entonces si buscas un ilustrador, él es una opción realmente genial a considerar. También tuve una imagen hipercube en una de las primeras secciones y realmente espero que esto haya sido útil y que ahora puedas empoderado para crear interfaz
realmente hermosa y no puedo esperar a ver tus proyectos, bocetos, wireframes, cualquier otra cosa en el directorio de proyectos aquí. Gracias por ser parte de esta clase. Espero que algunas de las técnicas que discutimos hoy, que ustedes descubrieron hoy hayan sido
realmente, muy útiles para ustedes. De verdad estoy deseando ver qué va tu camino, qué vas a hacer con los proyectos. Entonces siéntete libre de presentar cualquier cosa, ya
sea como bocetos tempranos, borradores no tiene que ser ninguna maqueta adecuada o lo que sea, wireframes, lo que sea. Estaré muy feliz de proporcionar algunos comentarios, pero tal vez podamos descubrir una o dos técnicas que realmente ayuda o
ayude a deshacernos de algunas cosas molestas que todavía tenemos en la web a veces. Al igual que las formas, por ejemplo o prácticamente cualquier otra cosa. Entonces, estoy muy ansioso por ver lo que se les ocurrirá y si tengo, les
puedo dar cualquier consejo si podemos ayudar en todos modos, haré lo mejor que pueda. Yo creo. Sí, lo haré. Seguro. Te lo prometo. Garantizado. Entonces con eso en mente espero verte pronto y alguna parte del mundo y tener un día realmente bueno y esperando una conversación contigo.
14. Explora sobre diseño en Skillshare: manera.
Vitaly Friedman, Editor-in-chief, Smashing Magazine
