Design UX responsivo inteligente: dicas, truques e técnicas inteligentes

1. Introdução: Então, olá. Espero que tenha tomado um café hoje, porque esta vai ser uma viagem e tanto. Então, eu gostaria de levá-lo em uma jornada para padrões inteligentes de design responsivo e vai ser muito divertido. Meu nome é Vitaly e eu sou Editor-em-chefe e Smashing Magazine na revista para designers e desenvolvedores, e ao longo dos últimos anos eu tenho feito um monte de trabalho para design responsivo foi pequeno e grande aparelho. Eu sempre procuro padrões de design específicos de busca problema que podemos realmente resolvê-los de uma forma, que eles podem aplicar mais tarde para o meu trabalho. Como editora-chefe, obviamente corro essa medida em si, é apenas um site, não é um grande negócio. Mais pseudo-silhueta desta forma para apenas ver um site. Mas nós, como cientistas e desenvolvedores, talvez vejam isso de forma diferente, e vemos muitas caixas em todos os lugares, e nosso trabalho é basicamente mover essas caixas para garantir que criamos um site, ele escala para cima e para baixo como nós gostamos. Agora, isso não é fácil, é claro, mas é ainda mais difícil site, é mais difícil. Isto é como uma miríade de caixas de pequenas para grandes para tablets para tela assim, obviamente empreiteiros. Não são apenas telas, é também sobre a maneira como as pessoas realmente interagem com nossas interfaces. Então, isso é um grande negócio. Agora, esta oficina não é sobre isso, esta água não era sobre caixas. Eu realmente não me importo, mas pensar em design responsivo tendo visão boxy nós somos apenas forma. Esta classe também não é sobre tendências de caixa, porque realmente as tendências vêm e vão, mas eles realmente não ficam. Então, para mim é realmente dar-lhe algumas idéias para o resultado pensamentos sobre o que você pode aplicar ao seu trabalho além disso em cima. Também não se trata de estruturas como esfolar as coisas e garantir que elas funcionem, é mais sobre ideias e técnicas reais. Certo. Desde que eu mostro trabalhando ou falhando em projetos reais e por quê? É também sobre padrões de design certo. Quais são as coisas que podemos realmente ir em frente e aplicar ao nosso trabalho à medida que realmente produzimos resíduos de culturas? A maioria das coisas que vou mostrar são um pouco malucas, você pode não gostar da maioria delas. Eles podem soar ou pode parecer que eles são estranhos e fora de lugar às vezes. Eles também às vezes bastante complexos e incomuns. Você pode não estar correndo para este problema o tempo todo, mas você pode encontrar problemas semelhantes e uma vez que você faz, você vai saber exatamente o que fazer e como lidar com. Isso vai ser muito divertido vamos olhar para o discípulo responsivo, sem resposta, grande perspectiva primeiro e então vamos mergulhar profundamente nesses pequenos componentes moleculares e vamos pensar sobre alguns maneiras interessantes de como fazer as coisas certas. Aperte o cinto de segurança, esta vai ser uma viagem e tanto. 2. PROJETO: Tudo bem. Enquanto projetar alguns componentes é uma coisa, mas realmente colocá-los juntos dentro da interface é uma história completamente diferente. Agora, na verdade, você não pode simplesmente ir em frente e pegar, projetar uma mesa aqui e talvez escolher a tipografia aqui, e talvez algumas caixas de luz ali, e cair aqui e depois colocá-lo completamente e chamá-lo de design. Agora, isso não é realmente design. Isto é mais como juntar as coisas. O design precisa de uma imagem grande. Você precisa saber para onde você está indo visualmente e também em termos de layout, certo? Então, requer um pouco mais de trabalho. Agora, podemos olhar para todos esses componentes que falamos individualmente, mas você precisa saber, precisamos saber exatamente como uni-los dentro de um determinado contexto, certo? Então, e se olharmos mais de perto a interface mais complexa, certo? Ou talvez apenas um exemplo de uma interface complexa realmente. E se pensarmos na interface como esta, certo? Um layout de artigo, layout de revista. Então, o que temos aqui é um belo layout que eu escolhi, e este artigo que eu escolhi, que é arte dirigida. Então, tem muita coisa acontecendo, certo? Mas se você realmente pensar sobre isso de perto, bem, há poucos componentes, certo? Mas, mais especificamente, bem, eles são repetidos uma e outra vez. Além disso, existem algumas seções mais ou menos complexas, é claro, mas você encontrará muitas ilustrações. Você vai encontrar muitas aspas completas, você vai encontrar muitos de todos os diferentes componentes pequenos que realmente compõem a interface. Então, e se olharmos para eles? Na verdade, se você olhar para eles e este lado nesta página, o que você vai descobrir, bem, na verdade existem 26 deles, certo? Então, apenas recriando esta página, podemos aprender muito do que, como colocar todos esses componentes, ou explorar todos os padrões de design que vamos falar nas próximas seções. Puxe-os juntos em uma única peça. Temos navegação, topografia, imagens dirigidas à arte, ilustrações, gráficos, gráficos, citações, sidenotes, notas de rodapé, elementos de mídia, biografia, artigos relacionados, caixa de newsletter, unidades de publicidade, caixas promocionais, Estou ficando sem ar, certo? Então, isso é muito. Então, e se nós realmente pegarmos isso e olharmos para os diferentes componentes que compõem, e tentarmos desenhá-los, e modelá-los, e juntá-los. Talvez reorganizá-los, olhar para eles especificamente em todos os diferentes detalhes que realmente os compõem e, em seguida, colocá-los juntos em uma interface. Talvez seja semelhante e talvez pareça muito diferente, mas o ponto é, este será o nosso experimento e exercício para colocar todas essas coisas que vamos explorar e descobrir uma maneira de fazê-las funcionar. Então, vamos fazer isso. 3. O que são padrões de design?: Padrões de design. Agora, quando falamos sobre padrões de design, bem, eles realmente não têm uma boa reputação na comunidade. Quando pensamos em padrões de design, tendemos a pensar em soluções preguiçosas, ou fora dos componentes da prateleira, se você quiser. É só tirar da prateleira, aplicar no seu projeto. Às vezes estamos pensando no contexto que temos, e você liga para o dia. É basicamente isso, certo? Bem, isso não é bem o que eu falei quando falamos sobre padrões de design nesta sessão. Nós também chamamos a coisa famosa cara humilde tipo paralaxe e design de página única é um padrão. Mas para mim, não são. São mais como tendências, e as tendências não importam, mas as técnicas importam. Então, quando falamos de padrões aqui, estamos falando de técnicas de design inteligentes e úteis que realmente provaram trabalhar em projetos da vida real. Então, essas técnicas não são realmente um ponto final seguro à prova de balas de um projeto. Veja-os mais como uma conversa de design ou como um iniciante de conversação de design. Isto é algo que você começaria a construir. Então você iria realmente pegar uma dessas soluções e então você vai pensar sobre as formas de como você pode aplicá-la. Construa sobre ele e aplique-o ao seu projeto. Então, eles nunca são tipo de soluções de acabamento, mas mais como idéias sem forma que você precisa nutrir, que você precisa moldar, que você precisa formar, e trazê-las à vida. Mark Boulton disse uma vez que o processo de design é estranho e complicado porque envolve pessoas e organizações, que muitas vezes são estranhas e complicadas. Bem, para ser honesto, em muitos dos projetos em que eu estava trabalhando, esse é exatamente o problema porque os gerentes, as pessoas com quem eu trabalho nos projetos realmente têm uma visão muito padrão ou clássica de como responsivo funciona, e para ser honesto como um processo criativo funciona em geral. Parece que está certo. Onde você tem um começo em algum lugar, e você tem um fim em algum lugar, e então apenas siga suas iterações, e você apenas segue através, certo. É muito linear. É muito previsível. Mas isso não é assim na realidade, certo? Porque a realidade parece muito, muito diferente. Para mim, é mais como uma série meticulosa de sprints onde você começa em algum lugar e começa a explorar, e você diverge, e você descobre que talvez eu deva fazer isso, ou talvez eu deva fazer isso. Talvez a minha mesa deva ficar assim. Eu faço meu layout vai ficar assim, e assim por diante, e assim por diante, certo. Então, você realmente vai em frente e explora, e você descobre o que funciona melhor dando suas necessidades. Então, em algum momento, você vai acabar com pontos sem saída, becos sem saída. Bem, não há como partir daí. Talvez alguém tenha matado sua ideia, talvez tenha morrido silenciosamente em uma sala de reuniões ou algo assim. Mas você precisa repensar. Você precisa pensar em maneiras diferentes de abordar o mesmo problema, e é aqui que eu sinto que você perde mais tempo, e porque eu quero ser eficiente, eu não posso dar ao luxo de perder tempo. Então este é exatamente o ponto em que esses padrões de design podem ser extremamente úteis porque você pode saber, ok, nesta situação, esse padrão específico, essa solução específica pode funcionar bem. Eu não vou aplicar um para um. Mas dado o contexto que eu tenho, eu poderia tentar encontrar uma maneira de realmente implementá-lo de uma maneira adequada para que esta fase de exploração não tenha que levar tanto tempo, certo? Então, você pode se mover daqui em direção a algo, um lugar melhor onde você pode realmente facilmente chegar, e então convergir para a idéia final. É por isso que quando começamos a projetar com muita frequência. Nós realmente ir em suas lojas como Styleguide Boilerplate planilha padrão que na verdade listam todos esses componentes diferentes um lado e todos os diferentes frameworks do outro lado. Então é ótimo para prototipagem porque você pode simplesmente ir em frente e olhar, ok, talvez eu precise de seletores de ocorrências e você não precisa escrever do zero. Certo. Você pode simplesmente pegá-lo e trazê-lo em seu projeto, em seu design, em seu código, e você tê-lo, certo. O óbvio provavelmente não é o que você vai usar quando você realmente começar a projetar ou construir. Mas isso é realmente ótimo para prototipagem ser rápido. Então, este é o tipo de padrões de design que eu estou falando. Algo nu, algo para chegar a precisar formar e moldar e que você constrói quando começa. Agora, nas próximas seções, vamos cobrir muitos segmentos diferentes de diferentes áreas, e vamos começar com navegação, e vamos passar por diferentes tipos de navegação, iconografia, acordeões, tabelas e calendários, formulários, elementos de entrada. Bem, formar elementos em geral, linhas de tempo, gráficos e gráficos, mapas, notas de rodapé, e assim por diante, e assim por diante. Quanto mais formos, mais difíceis ou mais complexos serão alguns desses componentes. Mas no final, tudo vai realmente fazer sentido porque eles não são realmente tão difíceis. Então, vamos seguir em frente, e vamos continuar com a navegação. 4. Navegação: Surpreendentemente, tornar o conteúdo acessível e disponível em todas as telas diferentes, é realmente, muito difícil, e não é apenas o problema do layout. Também é uma questão do que você coloca, onde e como você apresenta a navegação. Porque você pode ter seis, sete, oito mega dropdowns em grande vista, mas o que diabos você vai fazer com ele em vista menor? Isto é sempre um problema. Agora, há escritórios estabelecidos paradigma de conteúdo de paridade de conteúdo, que está governando design responsivo de qualquer maneira, que diz, bem, seus usuários vão fazer o que quiserem fazer basicamente. Sempre que alguém vem até você e diz que seus usuários não vão fazer X, ou usar esse recurso, ou ler este artigo, ou precisar desta parte específica do design, bem, sempre pergunte os motivos porque você nunca sabe. As pessoas podem fazer o que quiserem e farão. Então, é por isso que essa paridade de conteúdo é realmente prevalente. Isso não significa que a experiência vai ser idêntica e vai ser a mesma em todos os lugares. Você não pode ter tanto conteúdo, tanta navegação tanto na área de trabalho quanto em uma tela pequena, mas você pode, e você tem que se certificar de que todo o conteúdo, e todos os recursos estão acessíveis em ambos. Então, talvez você possa realmente mostrar a visão grande de navegação completa, mas talvez também possamos usar divulgação progressiva, ou acordeões, ou simplesmente esconder coisas atrás do link em uma visão menor também. Agora, uma maneira errada de fazer isso seria realmente ir em frente e pegar a navegação que você tem no desktop, e traduzi-lo quase um para um para ter certeza de que ele parece mais ou menos o mesmo em dispositivos móveis e funciona exatamente da mesma forma em móvel. Agora aqui, nós temos um site da Unidade de Saúde Middlesex-Londres e isso é realmente o que eles fazem, onde eles têm navegação primária no topo, navegação global, e você tem sub-dropdowns, e você também tem pesquisa, e você também tem , obviamente, um conteúdo de navegação regular itens relacionados, e assim por diante e assim por diante. Então, o que eles fazem na visão menor é realmente mostrar praticamente tudo. Você ainda tem essa navegação global no topo, você tem um grande logotipo, e então você tem seus suspensos porque com alguns suspensos mudos, estranhos ou misteriosos aqui. Mas, em seguida, eles também têm sub-navegação na parte superior ou inferior, desculpe, e se você clicar sobre ele, é realmente é estendido, e então você tem uma barra de pesquisa também. Agora, isso é apenas muita navegação, você não precisa de muita navegação em tudo, porque obviamente a maneira como as pessoas interagem com o dispositivo é diferente no desktop e no celular. Na área de trabalho, bem, você tem um monte de clicar, no dispositivo móvel, enquanto você pode acabar com um monte de deslizar e rolar para baixo. Então, o que você sempre pode fazer é obviamente priorizar. Isto é o que a WWF faz. Bem, obviamente eles têm um monte de conteúdo para mostrar como projetos relacionados, e notícias, e todos os diferentes projetos em que estão trabalhando. Mas, mais especificamente, obviamente, eles têm muitos arquivos de todos os anos. Então, cada coisa que eles têm na navegação é um menu suspenso: Espécies, Lugares, Ameaças, Nosso Trabalho e assim por diante e assim por diante. Mas, em vez de mostrar todos eles em um grande acordeão, eles priorizam. Embora eles em vez disso, é realmente ter dois links, botões de call-to-action que realmente levam a doação, doação e adoção. Em seguida, eles também têm o infame ícone de hambúrguer no canto superior direito, que apenas desliza nas seções primárias de navegação, não tudo, mas apenas o primário. Então, quando você chegar lá, você pode realmente navegar mais longe. Se reduzir a complexidade que eles tinham era oito dropdowns em algo muito mais gerenciável. Agora, o próprio off-canvas, nem sempre é uma boa idéia ter isso porque quando você acaba com a navegação off-canvas, você sempre acaba com muitos itens secundários sendo escondidos naquela gaveta e eles não estão necessariamente usado. Então, pense duas vezes sobre o que você está colocando lá. Na verdade, o que temos tentado fazer nos últimos anos é realmente tentar descobrir o que podemos fazer para priorizar isso. Então, nós fornecemos uma pesquisa em si primeiro, e torná-la tão boa quanto possível, e tentamos executar alguns testes para descobrir se os usuários realmente precisam dela? Eles usam isso? Eles estão bem com a busca sozinha sem navegação? Normalmente, é claro, eles não são, então adicionamos uma camada de navegação, e então, se ainda for a mesma, adicionamos a segunda camada de navegação. Então, sempre pensamos na navegação como camadas de cebola e você adiciona mais apenas se precisar, então nunca tivemos que ter mais de duas camadas. Então, este ícone de hambúrguer está obviamente em todos os lugares, mas o que também descobrimos é muito interessante é que as pessoas usam o ícone de hambúrguer em cenários muito diferentes. Agora, como as opções de navegação não estão disponíveis quando você acessa o site, o que percebemos agora é o teste de habilidade é que as pessoas realmente usam esse ícone, a fim de realmente obter informações sobre o que o site é sobre. Mas, em vez de realmente entrar em uma seção dentro da gaveta, o que eles realmente fazem em vez disso é simplesmente abrí-la, e fechá-la novamente. Só estou a ter a ideia do que é. Então, esse padrão que na verdade Star Wars está usando, quando você realmente tem o ícone de hambúrguer e off-canvas, e então a navegação deslizando da esquerda para a direita, bem, isso é muito conveniente. Mas, nós podemos torná-lo um pouco melhor se apenas nos certificarmos de que sempre que você realmente clicar nesse ícone, você sempre tem o botão X ou ícone X, ou qualquer outra coisa, para fechá-lo imediatamente. Só um pouco melhor. Agora, o ícone do hambúrguer em si, tem havido muita discussão sobre isso, mas o mais importante é realmente importante ter em mente que ele não é compreendido por todos. Além disso, sempre que você coloca um ícone em sua interface e oculta algumas ações importantes por trás dela, você pode acabar com uma taxa de engajamento baixa. Provavelmente aconteceu em quase todos os projetos em que estamos trabalhando, então você tem que ter muito cuidado lá. Time.com é o melhor exemplo para onde eles realmente adicionaram o ícone e eles notaram que a conversão real diminuiu e os cliques diminuíram, então eles adicionaram o menu de texto para explicar o que é porque eles sentiram que talvez as pessoas Só não entendo o que é e realmente não mudou. Em seguida, eles adicionaram uma sobreposição explicando o que esse ícone significa e ele ainda não mudou muito. Porque quando você esconde algo atrás de um ícone, você não deve se perguntar por que as pessoas param de clicar. Então, em vez disso, o que podemos fazer é como Luke Rublevka sugere, ícone de hambúrguer não é finalmente reconhecido, então talvez apenas usar Menu em vez de ter certeza de que isso está claro. Mantenha ações importantes visíveis, não atrás de um ícone com um menu de etiquetas claras e uma forma de botão clara para dançar. Se você precisar usar o ícone de hambúrguer, você pode realmente usá-lo desta forma, onde ele pode realmente flutuar à direita, à esquerda, enquanto você rolar para baixo o site. Então, está sempre disponível, mas não é realmente intrusivo. Então, é muito legal. Mas, também o mais importante, o padrão mais útil que continuamos usando o tempo todo é aquele que chamamos de menu mais padrão de pesquisa. Não importa quanta navegação primária você tem, e não importa quão complexa sua interface dentro do seu site é. Talvez você tenha abas e acordeão, talvez tudo misturado. O que você sempre pode fazer é realmente trazê-lo para baixo para este menu simples e visualização de pesquisa, onde você tem o menu e pode ser off-canvas se você tem muitos itens, ou pode ser apenas deslizando entre o logotipo e o conteúdo se for apenas cinco ou seis. Em seguida, você tem pesquisa e, em seguida, você permite que as pessoas pesquisem. Tudo o que você tem dentro de sua interface, bem, você pode simplesmente mudar de orientação às vezes, se são guias ainda pode ser guias. Então, o acordeão horizontal, vai ser transformado em acordeão vertical. Na verdade, o acordeão é na verdade a bala de ouro em muitos, muitos cenários. Se você não sabe o que fazer, tente acordeão. Por alguma razão estranha, sempre funciona em quase todos os lugares. Outra coisa comum a ter em mente é, sempre que você tem essa tela off-canvas, você sempre acaba com este intervalo desconfortável porque você pode mostrar alguns itens, praticamente todos os itens em grande vista, mas você não pode mostrar muitos itens na exibição menor, então o que acontece no meio? No meio, muitas vezes você acaba por não mostrar nada embora você pudesse. Então, e se você realmente usar esse espaço disponível de forma significativa, e isso é o que o Guardian faz. Agora, The Guardian tem 13, 14 itens que são exibidos em grande vista e, em seguida, eles tinham este velho botão. Você também pode clicar em e obter informações sobre todas as outras opções de navegação que você tem. Mas, eles priorizam o que é importante, o que impulsiona mais tráfego para eles e esses itens são listados da esquerda para a direita, de acordo com essas prioridades de tráfego. Então, o mais importante são seções de uso pesado estão sempre disponíveis, e eles podem mostrar o máximo que podem, quando podem e se você precisa mostrar para ver tudo o resto, você pode realmente ver todo o resto. Na verdade, é o mesmo que o Google faz. Google Docs, porque seria estranho mostrar alguns ícones primeiro, e depois ter um ícone de hambúrguer para mostrar todos eles, simplesmente não faz sentido. Então, isso funciona muito bem. A última coisa que realmente pode funcionar muito bem é talvez pensar em navegações mais complexas como esta, onde você tem muitos filtros, o que pode funcionar muito bem aqui é realmente olhar para o seções que você precisa projetar, neste caso alguns filtros para talvez um site de comércio eletrônico. Tente examinar o conteúdo sozinho, extrair o significado e redesenhá-lo. Então, se você pensar sobre isso, bem, você pode ter alguns filtros, talvez seja tamanho emitido, talvez seja uma marca, talvez seja cor, coisas assim. Então, você pode realmente separá-lo em pedaços, em abas, e apresentá-los na parte inferior, três deles para que as pessoas sempre que você clicar neles, eles podem realmente obter talvez três, quatro itens de uma vez e eles podem navegue com eles. Faz muito mais sentido. Outra coisa que realmente pode funcionar muito bem nesses cenários é essa abordagem de modo de visualização, que o leva um pouco mais longe. Bem, a idéia é usar padrão off-canvas, mas também com esta abordagem modo de visualização quando você pode realmente ter vistas encapsuladas. Então, você tem o conteúdo na parte de trás e ao mesmo tempo tem uma camada da navegação à direita, ou à esquerda, é claro, dependendo do seu design. que pode funcionar surpreendentemente bem em muitos cenários, aqui é feito sobre a decadência do câncer, onde você realmente tem alguns itens de navegação e pode navegar facilmente e ver o conteúdo ao mesmo tempo. Você pode, é claro, também tê-lo em cenários mais complexos como em um checkout aqui, onde aqui em cottonbureau.com se você quiser adicionar um item ao carrinho e você quiser verificar, você faz check-out e tudo mais é novamente off-canvas nessas exibições encapsuladas. Pode ser muito útil. Então, o que podemos fazer? Bem, podemos pensar sobre navegação em camadas de cebola, adicionar pesquisa primeiro, pensar sobre navegação primária, navegação secundária, talvez acordeões, coisas assim, mas nunca, provavelmente não é uma boa ideia mover além do terceiro nível de navegação. Mantenha botões fechados e abertos no mesmo local, então sempre que os usuários realmente clicarem no ícone para abrir a gaveta, eles podem realmente fechá-la imediatamente. Se você tiver muitos itens exibidos na navegação, pense neste menu e procure padrão com off-canvas. Funciona praticamente em todos os lugares. Ao mesmo tempo, podemos estendê-lo para o padrão de prioridade mais, que é realmente ainda melhor considerando que você pode ter alguns botões de chamada à ação realmente importantes, por exemplo, links de chamada à ação que eles precisam manter em todo lugar. Eles têm alguns itens que você pode simplesmente deslizar no conteúdo com o botão de menu entre o logotipo e o conteúdo. É realmente uma boa idéia manter ações importantes visíveis e se você tem uma navegação muito complexa, você pode considerar realmente ter algumas guias, tentar apenas reduzir essa complexidade que você tem em algo mais gerenciável, a pedaços gerenciáveis. Além disso, porque temos telas mais altas, pense em controles sendo acessíveis na parte inferior da tela do seu celular, não necessariamente na parte superior, porque às vezes este controles superiores pode ser realmente difícil de acertar, enquanto os de baixo são muito, muito mais fáceis de acertar. Com isso em mente, você pode realmente criar algum tipo de navegação que funciona notavelmente bem em telas diferentes e não faz a interface se sentir lotada. Agora, que temos uma idéia do que fazer com a navegação, podemos passar para alguns pequenos ícones e ter certeza de que eles são responsivos também. 5. Iconografia: Agora, na seção de navegação, falamos sobre o ícone de hambúrguer e algumas pessoas podem não saber realmente o que esse ícone significa. Então, a seleção de um ícone é muito importante. Mas o que também importa é como você exibe esse ícone, certo? E é aqui que o conceito de iconografia responsiva entra em vigor. Porque sempre que você realmente falar com um designer sobre o que eles realmente pensavam quando eles realmente estão projetando ou projetando um ícone, eles sempre falarão sobre o ponto ideal, essa área onde eles escolheram a fim de projetar o ícone primeiro. Não é de admirar, então, se você reduzir este ícone ou reduzir o ícone, ele não parece tão afiado ou tão bom, certo? Então, só porque uma imagem é escalável, isso não significa que ela será legível, e a maioria dos elementos visuais tem essa seta perfeita, tamanho perfeito para o qual eles foram projetados. Não só ícones, mas praticamente todos os elementos visuais. Então, tendo isso em mente, talvez precisemos considerar fazer isso, certo? Tipo de ajustar as coisas o nível de fidelidade para nossos ícones com base na tela de exibição ou altura. Agora, você pode pensar bem que isso não é realmente necessário em muitos cenários como por que você criaria seis, sete ilustrações diferentes, a fim criar um tipo de experiência muito única para todas essas telas? Bem, você pode não precisar dele para todos esses visuais, todos os ícones, mas há um caso de uso específico em se tornar realmente, muito importante, e isso é branding. Porque muitas vezes, você tem um logotipo ocupando muito espaço, levando realmente espaço de pressão valioso em um dispositivo móvel, reservando-o para alguns materiais bons realmente não querem prestar atenção, porque eles vieram para o conteúdo, Certo? Então, o que você faz? Bem, você pode realmente ajustar o nível de fidelidade. Talvez você tenha três visões diferentes ou três designs diferentes para o seu logotipo, e então você decide quando colocar o que, a fim de reduzir a quantidade de espaço necessário para o logotipo ser exibido. Então, empurrando o conteúdo para que você sempre possa vê-lo melhor. Na verdade, muitos cenários, você pode pensar, bem esse tipo de logotipo de redução é realmente difícil porque você está perdendo um monte de detalhes e o logotipo é realmente importante para uma marca, mas em muitos casos, não é apenas que difícil em tudo, porque na verdade quanto mais você simplifica, mais atemporal ele se torna, e ainda vai ser reconhecível, como você pode ver nesses cenários. Então, quais são as técnicas práticas que você pode usar ao projetar esses logotipos? Bem, você pode pensar sobre o nível de detalhe, você pode pensar sobre a espessura das linhas, ou você pode pensar sobre os textos ou os contornos do texto, ou o que exatamente colocar e como você projetá-lo, o textura e coisas assim. Você também pode pensar sobre a posição e a estrutura. Então, se você tem um ícone e você tem um texto sob ele, você pode realmente querer olhar para ele e reposicionar alguns dos itens para que eles não ocupem tanto espaço vertical. Também, é claro, temos algo como texto circular em torno do seu logotipo. Bem, ele simplesmente não vai funcionar em telas pequenas, então você pode realmente tão bom apenas removê-lo e tentar torná-lo um pouco mais simples, e também mais memorável, ea maneira que você projetaria para construí-lo mais tarde, você acabou de colocar ícones diferentes dentro do SVG brilhante e potencialmente apenas usar algumas dicas de mídia dentro do SVG para segmentar telas específicas para projetar telas específicas. Agora, isso é o que podemos fazer com o ícone real, mas realmente temos que pensar sobre a posição um pouco mais, porque neste exemplo realmente simples aqui, o que eu posso fazer você escolher, mas também onde você coloca? Então, se você tem alguns acordeão, então se você sub drop downs, você vai colocar o ícone para a direita ou para a esquerda do texto? Ou qual ícone você realmente escolheria, você usaria uma seta de mais ou seta para baixo para a direita? Isto é meio importante. Agora, a boa notícia é que os caras que dirigem o estudo descobriram que praticamente todos entendem o que isso significa, então você pode ter um texto à esquerda, à direita, ícones à esquerda e à direita. As pessoas entendem, mas as pessoas clicam em áreas diferentes. Assim, o mapa de calor será muito diferente dependendo de onde você colocar seu ícone e não apenas o mapa de calor, mas também o tempo real de conclusão da tarefa será diferente também, e então não estamos falando de alguns 100 milissegundos. Aqui, a diferença é de cerca 1,5 segundos entre aquele que tem mais tempo ou menos tempo, então realmente importa. Então, o que fazemos aqui? Bem, o que nós descobrimos é que a forma como o ícone colocado direita é que ele vai apenas tendem a clicar no ícone e não no texto, agora que é realmente importante, e todas as opções com ícones colocados à direita resultaram em tarefa mais lenta conclusão, embora isso não signifique que está indo, não vai funcionar em nossos cenários, também, desculpe. O que significa é que sempre que colocamos um ícone à direita, melhor termos certeza que isso é realmente, muito grande, porque caso contrário as pessoas não serão capazes de clicar nele. Nós também podemos, naturalmente, mudar a espessura real e os estilos enquanto pairamos e realmente realmente reajustá-lo de forma muito granular, e isso é o que podemos fazer hoje sem ter que gastar muito tempo no código. Então, estas são todas as opções que temos para fazer nossos ícones aparecerem um pouco melhor. Então, o que podemos fazer? Agora, podemos simplificar ícones para uma aparência clara, para torná-los realmente melhor e mais nítidos. Podemos economizar espaço vertical usando este pequeno truque onde nós realmente reposicionamos alguma parte do logotipo, para que ele não ocupe tanto espaço vertical. Áreas específicas, especialmente se soubermos que os usuários vão concentrar no ícone como eles fazem em sub-drogados, quando eles são colocados à direita, escolher ícones maiores para que eles sejam mais fáceis de tocar, e obviamente nós precisa escolher um ícone dependendo do contexto direito. E potencialmente até mesmo evitar ícones completamente se pudermos, se precisarmos ter algo um pouco mais claro como menu em vez de um hambúrguer. Certo. Essas são as coisas que você pode fazer para tornar seus ícones um pouco mais responsivos, para garantir que eles funcionem e fiquem bonitos em todos os lugares. Agora, que nós realmente lidamos com visuais, talvez possamos passar para a estrutura e falar sobre algo tão chique como mesas, a seguir. 6. Tabelas e calendários: Estrutura de metais também, é claro. Agora falamos sobre design visual, falamos sobre navegação e há maneiras de realmente reorganizar o conteúdo em um layout para garantir que ele funcione, mas alguns componentes são mais difíceis de lidar. Pense em componentes com relacionamentos firmes, como tabelas ou calendários. Você não pode simplesmente ir em frente e movê-los e apertá-los em pouco espaço. Talvez você precise repensar completamente como você apresenta o conteúdo que realmente permanece em sua tabela ou em um calendário. O problema é que muitas vezes as mesas apenas olhar horrível e trabalhar horrível em telas móveis. Você precisa ampliar e diminuir o zoom o tempo todo e você não pode ver a tabela inteira e é muito, muito irritante. Então, como lidamos com eles? Agora, há uma solução simples. A coisa é que você não precisa necessariamente mostrar todas as colunas da sua mesa o tempo todo, certo? Então, como designer, você pode decidir bem, neste cenário específico, eu vou priorizar essas colunas. Vou detectar o que é importante e vou empurrá-lo para o usuário e permitir que eles realmente selecionem o que eles querem ver. Então, talvez eles não queiram ver tudo de uma vez mesmo. Então, deixe-os selecionar o que eles querem ver e se eles querem ver tudo bem, então você pode realmente fazer isso. Então você terá essa experiência iframe que queremos evitar. Mas por padrão, nós realmente tomamos decisões sobre quantas colunas serão exibidas e essa experiência será totalmente responsiva. Eles vão estender este exemplo, tendo um botão de exibição todos e botão de exibição. O que torna um pouco mais fácil para o usuário talvez para realmente navegar na tabela e o que eu também teria provavelmente apenas sendo ativado por padrão, é o chamado modo de foco. Onde você pode realmente apenas ajudar o usuário a tocar em linha específica ou uma coluna ou uma célula talvez, e destacar a área onde eles realmente estão. Porque especialmente se você quiser ver todas as colunas, você pode acabar neste enorme oceano de dados que você tem que navegar e você pode perder o controle. Você pode não saber exatamente quais dígitos você está olhando. Então, isso é muito, muito importante e útil. Então, aqui está um exemplo prático para isso. Onde o aplicativo musa foi implicação para a classificação da equipe e o que eles fizeram foi, bem, eles criaram uma grade de dados que usa exatamente esse padrão. Então, você pode ver aqui à direita, bem, você pode apenas tocar em uma célula e ele alterar o conteúdo, alterar os dados reais. Ao mesmo tempo, você pode selecionar o que deseja ver, quais opções ou quais colunas deseja ver e você as verá. A seleção é feita por padrão pelos designers. Às vezes você pode querer ter um cabeçalho fixo. Isso também funciona porque você pode ter uma grande mesa na visão grande e , em seguida, pequena vista você pode querer mantê-lo à tona. Então, você pode mantê-lo intacto. Então, você pode realmente ir em frente e exibi-lo enquanto todos os outros itens estão indo para ter esta experiência iframe. Também às vezes, você pode fazer algo completamente diferente. Então, aqui você tem uma tabela de dados com muitos dados e você pode optar por simplesmente ir em frente e talvez visualizá-la. Por que não? Então, você poderia transformar uma mesa em algo completamente diferente. Talvez um gráfico ou gráfico. Faz sentido, mas nesse caso, eu iria em frente e não mostrar apenas gráfico na vista pequena e única tabela na vista grande, mas realmente permitir que o usuário selecione o que eles querem ver. Alguns talvez ter uma visualização de gráfico por padrão com a apresentação no celular e, em seguida, a área de trabalho ter uma tabela com o link gráfico permitindo que os usuários alterem a exibição. Um padrão muito comum é um padrão de botão de opção. Sempre que você tem uma matriz de duas ou mais coisas específicas que você quer que o usuário seja capaz de selecionar, bem, você sempre acaba com esse tipo de padrão. Onde você pode ter, por exemplo, nos cinemas, você pode ter um título de show restante e você pode ter horários no topo. Nesse caso, se você quiser apenas economizar um pouco de espaço, o que você pode fazer é apenas até os títulos um pouco. Nesse caso, nesse tempo desta forma você realmente economiza bastante espaço por não fazer muito, para ser honesto. Outra coisa que você pode fazer, é claro, é lidar com calendários. Agora, calendários têm uma história muito diferente. Não pode dizer que vou largar todas as sextas-feiras porque não importam. Bem, na verdade eles fazem. Então, o que você faz? Bem, nesse caso, pense um pouco mais abstractamente sobre a forma como você realmente desenha. Pense no conteúdo que realmente vai nesta tabela. Extraí-lo, redesenhá-lo, re-embaralhar, e colocá-lo especificamente projetado para o espaço móvel. Então, aqui temos esta tabela com dias correndo no topo e o tempo à esquerda e você pode simplesmente ir em frente e realmente simplesmente mudá-la em algo completamente diferente. Talvez duas vistas. Um seria uma tabela pequena e o outro será um banco de dados, porque obviamente isso é muito mais fácil de obter resposta. Então, você não precisa ter essa experiência um-para-um. Pode diferir muito. Ou qualquer outro tipo de mesa. Você pode aplicar praticamente a mesma lógica. Aqui você tem AFC e NFC liga para os playoffs da NFL e, obviamente, você tem um monte de detalhes e você não pode simplesmente deixar cair algumas colunas. Não é assim que funciona. Então, nesse caso, você pode apenas tentar brincar um pouco com o tamanho e alterar o pouco topográfico, preenchimento, modelagem, e assim por diante. Em algum momento, não funciona mais. Então, você pode virar, obviamente. Basta virar o layout um pouco mostrando AFC liga por padrão que é o que eles fazem, e depois ter um controle deslizante deslizando para a liga NFC. Mas poderia muito bem usar um conjunto de acordeões e talvez apenas mudar o nível de fidelidade visual aqui. Você não precisa mostrar todos os logotipos em um o tempo todo e assim você poderia economizar algum espaço. Então, o que você pode fazer? Bem, você pode priorizar colunas importantes e soltar colunas que você não precisa e permitir que os usuários selecionem o que eles querem ver. Você pode estabelecer para navegação, bem como permitir que os usuários se movam entre as partes da tabela em fragmentos e partes. Você pode visualizar conteúdo e reposicionar cabeçalhos. Inclinando-os um pouco para economizar um pouco de espaço vertical. Você também pode apenas diminuir a fidelidade para realmente complexas, como tabelas de torneios, mas mais especificamente, sempre olhar para o conteúdo, extrair o significado dele, e tentar reutilizá-lo ou reempacotar e projetar -lo corretamente para o espaço móvel. Porque isso é realmente uma coisa muito frequentemente muito diferente do que você tem na área de trabalho. Então, isso em mente, você tem algumas estratégias para lidar com tabelas. Então, vamos passar para formulários da Web a seguir. 7. Formulários da Web (Parte I): Então, de todos os componentes que temos alguns são ridiculamente irritantes. Quando estou falando de irritantes, estou falando de formulários web. Porque ambos os formulários são muito tediosos e eles são extremamente difíceis e realmente apenas frustrantes para preencher em um dispositivo móvel. Então, como posso torná-los melhores? Especialmente, pensando em design responsivo em geral. Agora, há estratégias gerais óbvias que temos que ter em mente o tempo todo e elas não são realmente tão difíceis. Primeiro de tudo, precisamos colocar rótulos acima dos campos de entrada, só porque nós realmente criamos esse caminho linear agradável que vocês podem seguir sem ter que rolar para a esquerda, para a direita para descobrir o que o rótulo realmente é. Agora, às vezes estamos colocando o atributo de espaço reservado, que pode ser um pouco difícil às vezes. Só porque você pode não saber o que eles estão digitando e se eles são interrompidos ou distraídos. Então, talvez seja realmente bom ou uma má idéia colocar rótulos simples acima dos campos. Outra coisa é que às vezes é realmente difícil obter feedback visual, você simplesmente não sabe se os dados foram enviados ou não. Então, sempre habilite para desativar o botão imediatamente após clicar. Então, os usuários têm um feedback visual realmente bom imediatamente. Também podemos usar a validação de formulário em linha, é claro. Mas podemos usá-lo em lugares diferentes. Então, especialmente, quando se trata de senha, é melhor tê-lo depois que um campo é deixado que indica que o usuário enviou e terminou sua entrada. Às vezes, pode ser uma boa idéia fazer isso em movimento, certo? Depende. Também desabilite a correção automática porque ele pode realmente produzir erros. Desabilitá-lo em endereços de e-mail, pois caso contrário você pode acabar com uma entrada muito estranha. Desative o e-mail de capitalização automática, por exemplo, ou em outras áreas que não o exijam absolutamente. Também é claro, use o layout de teclado apropriado. Quero dizer, não adianta puxar um teclado de e-mail se você usar uma barra lateral para digitar dígitos em sua entrada de número de telefone, certo? Então, tenha cuidado com isso. Infelizmente, a maioria das formas ainda são extremamente chatas. Este onde você realmente tem que digitar o caractere de colchete esquerdo nos campos de entrada para enviar os dados. Outros são maus como este. Temos feito para garantir que estamos convenientemente localizados entre a Dinamarca e a Finlândia no seletor de balcão, que você tem que selecionar se você não quiser adicionar custos de seguro à sua conta, ou apenas tão chato como este. Mas o mais importante, o problema é que essas formas eles realmente não pensam sobre a interação real, eles pensam sobre a estrutura. Esta é uma parte difícil porque preencher um formulário como este é realmente muito difícil no dispositivo móvel. Requer muito esforço, um monte de torneiras, e é realmente simplesmente não é maneira confortável de fazê-lo. Então, e se pensássemos em projetar formas melhores um pouco diferentes? Talvez mais como este onde, no lado esquerdo você claramente tem um formulário. Ele tem uma estrutura de plataforma muito clara, simples, familiar para nós e se sente como forma bem. Então, se você projetar isso você está projetando um formulário. Mas à direita você está projetando uma interface. Na verdade, é a mesma entrada. A única diferença é que você é obrigado como um usuário para editar, para clicar em itens específicos para editá-los, certo? Então, sempre que terminar, basta clicar no início em vez de prosseguir. Então, o certo se sente um pouco mais como interface e muito menos como uma forma, certo? Parece progresso e não tédio, o que é grande coisa. Agora, o tipo de formulário também é uma dessas abordagens que ajudam você a alcançar exatamente isso. Sinta-se um pouco mais como uma interface e menos como uma forma. Então, nesse caso, bem, a idéia é focar na digitação o tempo todo. Então, em vez de realmente mover o mouse ou tocar em todos os lugares o tempo todo, você deve se concentrar apenas na digitação, então você digita. Então, se você quiser mover de um campo para outro, basta pressionar Enter ou selecionar A, B, C, D. Você não usa um menu suspenso de seleção porque você não usa todos eles obviamente na área de trabalho, basta usar atalhos de teclado o tempo todo em todos os lugares. Se você quiser mover da esquerda para a direita, do anterior para o próximo campo de entrada, bem, você pode fazer isso usando os controles na parte inferior, certo? Então, geralmente, se você pode evitar aqueles realmente chato, irritante, elementos estruturais, como um campo de entrada, por exemplo, você pode fazer isso usando um elementos de entrada mais inteligentes. Por exemplo, se você tiver apenas duas opções como mostrar e ocultar, basta usar um interruptor para isso, permitindo que os usuários toquem facilmente e movam-se entre os dois. Se você tem algo como uma faixa de preço, certo, com um mínimo com valor máximo, óbvio que o slide é uma escolha muito melhor para isso. Então também se você quiser apenas deixar o usuário selecionar um valor específico, um valor discreto como digamos 1, 2, 3, 4, 5, por que você não apenas listar todos eles usando controles segmentados e deixar os usuários tocar neles facilmente. O último que também é bastante importante especialmente quando se trata de check-out e coisas assim, apenas um passo simples, permitindo que os usuários aumentem ou diminuam o valor de, por exemplo, a quantidade de produtos ou cópias de um livro que eles querem comprar, coisas assim. Muito fácil de fazer e muito, muito útil. Na verdade, os controles deslizantes realmente podem percorrer um longo caminho. Então, você pode usar diferentes tipos de controles deslizantes, um único controle deslizante e um controle deslizante duplo, controle deslizante contínuo, controles deslizantes discretos, e assim por diante e assim por diante. controles deslizantes contínuos são aqueles onde você tem, digamos, valores indeterminados. Temperatura de preço e controles deslizantes discretos de coisas como tamanho da roupa. É sempre uma boa idéia manter e usar um contínuo e não impedir a página de resultados zero. Você pode realmente estender seus controles deslizantes para fazer mais do que apenas mostrar um intervalo de valores. Talvez realmente mostrando metadados reais sobre o número de opções que você tem nesta faixa de preço específica. Então, aqui você sabe exatamente com base na altura das barras, quantas opções você tem. Pode ser uma boa idéia talvez adicionar algum contexto em termos de texto a ele também. Além disso, a maneira como você distribui seu intervalo de controle deslizante também pode ser importante. Fique atento para ter certeza de que você sempre tem aproximadamente a mesma quantidade de itens em cada faixa de preço. Dessa forma, você deve se certificar de que os usuários nunca acabarão com página de resultados zero todos juntos, muito como o Airbnb faz, onde você tem exatamente essa barra legal na parte de trás. Então, resumindo aqui. Bem, basicamente podemos tentar fazer com que todos os formulários se sintam um pouco menos como formulários e um pouco mais como interface real usando esses elementos de interface tradicionais como controles deslizantes, como alternâncias, como switches, para realmente se afastar dos campos de entrada e selecionar barras, selecionar suspensos todos juntos. Quanto menos os usarmos, melhor será a experiência. Então, isso não é tão difícil, mas pode realmente fazer uma grande diferença. 8. Formulários da Web (parte II): Então, apenas algumas pequenas modificações como vimos na última parte, podemos ter certeza de que talvez sua forma realmente não se sinta como uma forma, talvez mais como uma interface. Eles são muito pequenos, mas há uma pequena diferença. Agora, se você realmente colocar tudo junto, você pode acabar com uma interface como esta. Então, você quer ter alguns seleto- grande realmente extravagante selecionar drop downs, que são realmente confortáveis para tocar. Você pode acabar com alguns controles segmentados, como este. Você pode acabar com botões realmente proeminentes que são tão fáceis de clicar, modo que mover entre o checkout realmente não se sente como um grande negócio mais. É confortável, mas no final você ainda acaba com esses campos de entrada, e não há muito que você possa fazer sobre isso. Você ainda precisa digitar os dados. Sim, você pode usar esses botões de rádio chiques como eles fazem aqui, mas no final, ainda parece trabalho. Talvez se pudéssemos realmente evitar campos de entrada completamente, isso funcionaria, mas precisamos digitar dados. Então, vamos dar uma olhada em alguns outros exemplos de como você realmente pode evitar esses campos de entrada, e torná-los um pouco melhores, se você precisar usá-los. Então, um deles é, é claro, sempre que você tiver quaisquer itens secundários, endereço, endereço opcional ou qualquer entrada de telefone opcional ou qualquer outra coisa, se você souber que você não necessariamente precisa deles, não mostre-os por padrão. Use algo como divulgação progressiva, como com o botão de adição ou o que quer que realmente o exiba, faça-os aparecer no clique, porque você realmente não precisa deles. Outra coisa é, você realmente tem um monte de dados confidenciais que você está pedindo. Bem, por que você não explica aos usuários por que você precisa desses dados? Quer se trate de entrada de telefone , endereço de e-mail, ou qualquer coisa, basta fornecer algum tipo de pequena dica para realmente tranquilizá-los por que você realmente precisa desses dados, porque pode ser muito bom que eles simplesmente não saibam o razões pelas quais você precisa dele. Outra coisa é o endereço de e-mail. Agora, sabemos que o endereço de e-mail é um daqueles itens críticos que você sempre tem no e-commerce e é muito importante ter. Mas se você tiver um endereço de e-mail incorreto, é como se o cliente nunca tivesse existido. Então, talvez você possa realmente tornar a entrada um pouco mais fácil. Então, sempre que os usuários digitam algo, bem, talvez você possa fornecer algo como autocomplete, auto-sugestão, com os provedores de e-mail comuns que, acordo com seu banco de dados, são muito usados pelos usuários. Talvez seja Facebook, talvez seja Gmail. Mas se alguém realmente digita no Gmail, é realmente muito mais fácil para ele corrigir porque eles podem simplesmente tabular, não é realmente um grande negócio. Isso é muito, muito confortável. A outra maneira de realmente melhorá-lo também é pedir aos usuários para verificar seu e-mail pouco antes de enviar seu pedido ou antes de enviar seu formulário de feedback, apenas para garantir que eles realmente forneceram o endereço de e-mail. Como o problema real é que a maioria dos usuários, quando eles são solicitados a digitar novamente o endereço de e-mail no campo de entrada, eles usam copiar colar. Na verdade, 60 por cento dos usuários de acordo com a pesquisa Baymard, consistentemente copiar colar o endereço de e-mail em vez de redigitar o e-mail. Então, não é uma boa idéia tê-lo porque a maioria das pessoas não usá-lo de qualquer maneira. Então, se eles cometeram um erro em primeiro lugar, eles vão repeti-lo porque eles copiam colar de qualquer maneira. Portanto, remova completamente o campo de verificação de e-mail. Você não precisa disso. Em vez disso, talvez você possa usar o preenchimento automático inline, verificando realmente inline que ele está correto, ou apenas ter uma página de revisão onde ele está sendo solicitado. Muitas vezes você acaba com situações em que você tem espaços reservados para economizar espaço, especialmente em dispositivos móveis. Bem, o problema com espaços reservados é que quando as pessoas começam a digitar, elas desaparecem. Então, isso é grande coisa porque eles realmente perdem contextos. Então, você pode realmente ter ambos. Então, SP vai começar a digitar, você pode realmente empurrar este título um pouco para o topo. Então, não é tão proeminente, mas ainda está disponível, então não se perde. Essas entradas, ou esses rótulos, também podem ser responsivos. Então, se você não tem espaço para mostrá-lo no topo, você pode realmente mostrá-los à direita ou quando quiser. Então, você pode ser realmente flexível sobre isso. Da mesma forma que com textarea. Todas essas pequenas coisas podem realmente resumir, então, quando resumidas, faça a diferença. Então, aqui se você realmente começar a digitar, o tamanho textarea aumenta automaticamente. Então, você não precisa reservar oito ou 10 linhas para textarea. Você pode ser mais flexível sobre isso. Mais uma vez, reduza a altura total do formulário. Quando se trata de entrada do ano de nascimento, bem, às vezes você não precisa da data exata, talvez você só precise do ano. Então, peça um ano. Você não precisa de duas entradas extras para o mês e para a data. Além disso, o mesmo vale para o seletor de país, que pode ser infinito, quase infinito , sentir como infinito, onde você pode acabar com apenas não saber onde encontrar o seu país. Se você é da Holanda, ou você é de ou Holanda ou Holanda ou talvez seu país é priorizado no seletor de país. Então, você pode simplesmente pedir aos usuários para digitar os dois primeiros, três caracteres de seu país. Isso não é realmente um grande negócio e como eles digitam, você pode reconhecer os sinônimos na parte de trás. Então, não importa se eles digitam CH, Schwei ou Suíça. Ou se eles digitam DE, Deutschland ou Alemanha, você pode perceber que é a mesma coisa de qualquer maneira, e é muito mais fácil de preencher. Na verdade, falando sobre países, às vezes não é muito necessário pedir cidades porque você pode pedir um CEP. Na verdade, aqui está um pequeno estudo que mostra que uma vez, se você está pedindo aos usuários o CEP primeiro e depois pré-preencher cidade e estado automaticamente, em média, a taxa de conclusão é muito maior porque você vai prever corretamente com base em bibliotecas como ZipPopotam.us, por exemplo. Então, à medida que você começa a digitar, digitar seu CEP, você pode realmente preencher previamente a cidade e o estado para que os usuários não precisem digitá-lo completamente. Claro que o rei dos campos de entrada, que é a coroa dos formulários web aqui são os campos de entrada de cartão de crédito. Às vezes, esses formulários são realmente difíceis de digitar porque eles perguntam se é MasterCard ou Visa, e você tem muitos campos de entrada que você precisa passar. E se combinarmos tudo em um? Então, neste caso, você só pergunta, qual é o seu cartão de crédito? Digite o número do seu cartão de crédito, você só vê no, dica na parte inferior. Então comece a digitar. Bem, você pode realmente reconhecer lá atrás o que é, se é Visa ou MasterCard ou qualquer outra coisa. Uma vez que você tem essa entrada, bem, é meio que deslizando para o lado, e ele continua digitando. Então, observe que a notificação na parte inferior dica essa alteração. Então, você sabe o que está digitando, e então sempre que tiver algo que requer algum tipo de feedback, feedback visual, você também pode alterar o ícone. Aqui, neste caso, ele fornece EV e, finalmente, CEP, e algum ponto, se tudo estiver correto , isso é luz verde. É muito mais simples um campo de entrada que funciona e realmente não é um grande negócio. Agora, o que isso significa? Bem, se você pode evitar interações complexas, se você pode evitar campos de entrada complexos e realmente irritantes, como selecionar drop-down, por exemplo, faça isso. Em geral, se você puder habilitar um usuário para fornecer algum tipo de entrada com um toque ou um clique, procure isso. Se você pode simplificar, obviamente se você pode simplificar alguns elementos formais, faça isso. Prefira botões de rádio, alternâncias e controles deslizantes apenas porque eles são muito mais fáceis de manipular em um dispositivo móvel. Se você não precisar de campos específicos, campos de entrada , campos secundários, não será necessário mostrá-los imediatamente. Mostre-os como divulgação progressiva. Use padrão de rótulo flutuante para realmente nunca perder o contexto do que os usuários estão digitando. Além disso, porque a maioria das pessoas está copiando e-mails de qualquer maneira, basta evitar a verificação de e-mail, usar algo como verificação embutida ou simplesmente pedir mais tarde para verificar o endereço de e-mail. Sempre que você tiver informações demoradas, pense em maneiras comuns mais simples de reduzir essa complexidade em algo um pouco mais gerenciável. Faça também uso do CEP. Uma vez que você pedir o CEP você pode pré-preencher um monte de dados dele. Em geral, basta considerar o uso de entrada em vez de porque na maioria dos casos você realmente não precisa de um menu suspenso completamente, especialmente para coisas como o seletor de país, você simplesmente não precisa dele. Desta forma, apenas usando estas pequenas regras básicas, você pode realmente ter certeza de que sempre que você tem um campo de entrada, ele realmente serve a um propósito, e seus formulários serão realmente muito mais curtos no final, e os usuários esperançosamente, será muito mais feliz. 9. Ajuste de microcomponentes (Parte I): Então, alguns dos componentes que falamos vão ser usados em praticamente todos os projetos, em todos os projetos responsivos. Pense na navegação ou até mesmo nas tabelas. Mas alguns deles podem não ser usados, ou muito raramente. Agora o problema é, no entanto, se você não tem pensado sobre como um componente específico se encaixa dentro do contexto, você pode acabar com situações realmente difíceis. Então, alguns desses componentes são realmente difíceis de gerenciar uma vez que tudo o resto é definido. Então, vamos dar uma olhada em alguns desses micro componentes que você pode precisar, mas você provavelmente não precisa o tempo todo. Então, quando você pensa sobre os componentes em um nível muito estratégico, é uma boa maneira de pensar sobre isso como níveis de experiências. Como Patty Toland falou em um para palestras para o grupo Filament, ela disse que podemos pensar em projetar componentes responsivos em termos de camadas de vários níveis de experiências e funcionalidade. Começamos como uma camada funcional, e nivelamos níveis até níveis mais aprimorados para cada componente, e para todo o conjunto de componentes. Então, começamos com algo realmente básico que realmente precisamos. Começamos com a velocidade, magra, certificando-se de que o componente web que estamos construindo é enxuto, rápido e muito otimizado. Além disso, garantimos que ele é acessível totalmente funcional em toda a gama de telas e dispositivos. Então, uma vez que temos isso, podemos realmente começar a falar sobre a estrutura e como o componente vai realmente mudar dependendo das grades, no ponto de interrupção, na ordem e layout. E então, na verdade, uma vez que temos isso, quando sabemos exatamente qual é o comportamento responsivo deste componente, você pode pensar sobre a decoração em termos de estilo ou logotipo marca, cores, fontes e assim por diante. Então, sempre pense nessa pirâmide primeiro quando você estiver realmente projetando um componente personalizado. Digamos que você tem que projetar uma linha do tempo. Agora, a linha do tempo não é grande coisa, bem geralmente você só tem uma linha do tempo e você se ater a ela. Pode ser horizontal, pode ser vertical. Neste caso, podemos realmente jogar um pouco com a topografia, um pouco com o tamanho da fonte, e o preenchimento. Não devemos manter esta linha do tempo agradável, e nós provavelmente poderíamos manter tudo longe, mas então a experiência de leitura real pode não ser boa porque o alinhamento será muito curto. Então, neste caso você pode simplesmente transformá-lo em algo um pouco diferente como uma visão geral desses itens que funciona muito bem. Quando se trata de gráficos ou gráficos, não é tão difícil ou basicamente eles são apenas elementos de mídia, então você pode simplesmente apertá-los no espaço móvel. Mas você precisa ter certeza de que esses gráficos de pizza ou o que quer que seja que você está usando, ainda são grandes o suficiente. Então você pode realmente precisar torná-los maiores, não pequenos para o espaço móvel. E agora, todas essas interações, é claro, precisarão estar ainda no lugar. E também ao mesmo tempo, às vezes você pode ter esses elementos animados. Então, você realmente pode repensar a espessura das linhas e como elas são desenhadas dependendo do que você deseja projetar. Agora, aqui está um belo estudo de caso da Globe and Mail, de Teehan Lax, que desenha o Global Mail, e eles estão falando muito sobre os projetos de componentes financeiros, especificamente para mercados de ações. E novamente pensando em infográficos e gráficos, e eles são realmente considerados todos os diferentes pontos de vista e também rótulos específicos porque nesta posição, ao fundir para gráficos, posição de rótulos, e cor dos rótulos pode ser dramaticamente importante. Porque você quer ter certeza de que este infográfico parece bom tanto em uma tela de má qualidade e uma tela de boa qualidade. Então, pense não só na espessura das linhas, mas também nos rótulos e onde você as posiciona e, claro, o nível de fidelidade terá que mudar. Às vezes, você pode mostrar exatamente a mesma coisa tanto no celular quanto na área de trabalho, e também as cores para escolher, por exemplo, as cores de fundo, pode fazer uma grande diferença. Mapas em geral são um grande negócio, porque quando você tem um mapa, e você usa por exemplo o mapa e o mapa CG como um filtro, talvez estados como filtros como você faz aqui, e ele funciona bem na área de trabalho, mas realmente não funciona no celular em tudo, por causa de um problema de dedos gordos que você não capaz de tocar em um estado específico, especialmente se o seu tamanho não é grande o suficiente. É realmente grande coisa. Voltando a essa camada que falamos no início, bem, por que não começamos com algo funcional, como um menu suspenso seleto, como você pode ver aqui? E, em seguida, fazer padrões e melhorá-lo para algo um pouco mais significativo para telas maiores. Menos como um mapa real onde você pode realmente tocar e selecionar o que você deseja selecionar. Com mapas em geral, você pode realmente ir um pouco mais longe e se você tem uma área muito pequena que os usuários podem querer selecionar, basta permitir que eles selecionem vários países ao mesmo tempo e, em seguida, solicitar uma pequena lista todos vocês para permitir que eles realmente selecionem a parte específica que eles querem ter selecionado. Uma coisa muito pequena, mas pode ser bastante útil na verdade. Mas você não precisa carregar o mapa na frente o tempo todo. Como você sabe que você tem um monte de mapas em seu design, você pode acabar com os usuários realmente rolando para baixo novamente diretamente para o mapa, que provavelmente não é o que você quer. Então, nesse caso, o que você pode fazer é realmente fornecer uma imagem, apenas uma imagem do mapa, uma captura de tela do mapa, se quiser, com um link para o Google Maps ou qualquer serviço de mapa que você está usando. Então, se você sabe que a maior parte do espaço da tela está disponível, a largura da tela está disponível, podemos realmente mostrar o IFrame real. Certo. Mas você não precisa mostrá-lo no espaço normal o tempo todo, e ter condicionalmente carregar o mapa o iFrame quando você precisar dele, e apenas mostrar um link quando você não precisar dele. O mesmo vale para caixas de luz, bem na verdade, porque muitas vezes você clica em uma imagem, ou você toca em uma imagem na página, e então você tem uma imagem e realmente o menor tamanho, embora seja suposto ser um caixa de luz. Então, basta mostrar a imagem em uma pequena exibição. Certo. Com um link para a exibição grande real, que as pessoas possam ampliar e diminuir o zoom se forem como, e depois mostrar e carregar a caixa de luz condicional mais condicionalmente. Só quando você precisa porque não é necessário o tempo todo. Tudo bem. Então, o que podemos aprender com isso? Bem, em geral, pense sobre esta pirâmide todo o caminho, pense sobre a velocidade e o acesso chegando primeiro, certifique-se de que você é bom lá, e então você pode realmente usar escala e estilo mais tarde para criar realmente belas experiências responsivas ricas. Agora, virar ou mudar de direção não é bom o suficiente na maioria dos casos. Quero dizer, ajustar de desktop para celular, que infelizmente é o que faremos na maioria das vezes, pode ser bastante difícil. Não é apenas ajustar o layout, pense em mudar o nível de fidelidade, alterando as diferentes visualizações, pois é um infográfico de qualquer componente personalizado. Também quando se trata de mapas e caixas de luz, pense no carregamento condicional desses iFrames, e se você não pode ter certeza de que o usuário se sente confortável com a seleção de uma pequena entrada, bem, basta solicitar o ao toque, para que eles possam realmente especificar a entrada quando necessário. Mas, em geral, uma vez que você tenha tudo isso em mente, você pode ter certeza de que todos esses componentes, quando eles entram, podem ser tratados de forma eficaz e eficiente. Então, os usuários não precisam esperar, e eles ainda têm uma experiência muito boa em navegar no seu site. 10. Ajuste de microcomponentes (Parte II): Na seção anterior, falamos sobre alguns micro-componentes visuais, certo? Coisas como mapas, coisas como caixas de luz, que na verdade têm um elemento de mídia neles. Então, isso os torna realmente bastante presentes. Ao mesmo tempo, existem muitos componentes estruturais que podem não estar tão proeminentemente posicionados. Depende como veremos em um segundo, mas isso pode exigir muito mais trabalho a ter em mente, especialmente quando se pensa em migalhas de pão, todos esses pequenos detalhes. Então, vamos dar uma olhada em alguns deles. Então, eu realmente acredito que se um problema de design pode ser resolvido de forma responsável, eventualmente, ele será resolvido de forma responsável. O problema é que tendemos a ignorar. Ignorar algo tão grande como um carrossel. Certo? Agora, nós falamos sobre os visuais no anterior, mas aqui, o que é realmente importante é a estrutura real do carrossel. Agora, muitas vezes, se nós apenas abstrairmos da apresentação real, ele contém alguns erros e alguns pontos no meio, o que é suposto significar progresso, tipo de que passo você está no momento, e muito muitas vezes eles são realmente mal projetados. Como este é provavelmente um dos piores exemplos, onde você tem uma grande imagem realmente proeminente no meio, e então esses pequenos pontos que deveriam ser seus itens de navegação. Certo? Esta é a maneira como você navega. Isso não é muito conveniente, é por isso que muitos designers tendem a se afastar dos carrosséis. Por exemplo, isso aqui, pode ser apresentado como um carrossel, e muitas vezes é baseado em dados, em dados sólidos. Porque se você olhar para quantas pessoas estão realmente usando carrossel, para ser mais específico, quantas pessoas realmente vêem a imagem dois, três, quatro e assim por diante, você vai acabar com surpreendentemente um número baixo, certo? É cerca de dois a três por cento para a posição 2, posição 3, posição 4, posição 5, o que realmente não é grande coisa. Isso não é muita gente. Obviamente, transformar um carrossel em um gerador de imagens aleatórias, rolando pelas posições, realmente não ajuda, só porque as pessoas não navegam com ele. Então, podemos torná-lo melhor, talvez como a Amazon faz, onde em vez de apenas mostrar setas e pontos, fornecer algum contexto. Por que as pessoas devem clicar nele? Forneça algo como uma miniatura ou um texto, que realmente torna mais fácil para os usuários ir em frente e clicar em uma dessas caixas para obter mais informações sobre um produto, uma oferta ou qualquer coisa que você tenha. É muito útil apenas para fornecer algum contexto. Outra coisa é pão ralado, então eu devo progredir passos. Se você fizer check-out na área de trabalho, bem, é perfeitamente bom mostrar todos os passos que o usuário terá que seguir. Mas às vezes, eu posso reduzi-lo a texto simples como você pode ver no canto superior esquerdo aqui. Nós só mostramos o passo um de cinco, e nomeamos o passo, e isso é praticamente tudo. Isto é o quão simples pode ser. Então, se o usuário passar para o segundo, terceiro, e assim por diante, basta alterar o texto de acordo. Realmente não é grande coisa. Agora, essas etapas de progresso podem ser realmente tão simples quanto as anteriores, ou um pouco mais difíceis. Aqui, é onde você realmente rolar para baixo o texto. Você pode realmente fornecer algum contexto sobre o quão longe isso veio para a leitura, ou terminou de ler esta seção de um artigo, que é uma espécie de realmente bastante útil. Outra coisa em uma configuração muito diferente é e-Commerce checkouts. Bem, aqui novamente, você tem seu cartão de compras, e então como você realmente vai para o checkout, o que você vê é que, em vez de realmente ter esses passos de progresso, eles agem como guias. Então, você pode mover entre o transporte, e faturamento, e revisão muito rapidamente, porque eles realmente funcionam como passos, o que também é bastante conveniente. Você realmente não precisa mostrar no texto sozinho, se puder. O mesmo vale para, se você tem uma seleção de vôo ou algo assim. Agora, migalhas de pão não tem que parecer migalhas de pão aqui. Por exemplo, você pode ter novamente coisas como uma pequena alternância que permite que você mostre, para ver tudo em toda a exibição. Mas, por padrão, você poderia ter uma visão compacta muito simples, sem distrair o usuário. Outra coisa muito importante a ter em mente é que, tendemos a esquecer o carrossel de mídia vertical. Agora, carrossel vertical são muitas vezes muito importantes, porque, a largura da tela, a largura do layout pode realmente ser diferente. Porque você pode ter uma tela grande, uma tela pequena, mas a largura por si só não diz realmente como se é um dispositivo móvel ou não. Enquanto a altura, pode ser um indicador muito bom de que é realmente um dispositivo móvel ou não um dispositivo móvel. Então, pense nas vistas móveis da música Vasco. Especialmente, se você tem algo como esta navegação, onde você tem alguns itens aparecendo. Bem, quando você clica em um ícone, isso não é muito dimensionado porque em algum momento, isso simplesmente não será mais visível. Será muito difícil navegar. Então, talvez você possa realmente pensar em usar acordeão com base na altura. Então, se você sabe que não há nada de altura para mostrar, todos os itens podem realmente usar mais, e tipo de show como o MoorLink, e mostrar as seções em partes. Pode ser bastante útil. Agora, desenhe as comparações. Obviamente, no celular, você não tem muito espaço. Então, o que você precisa fazer? Bem, a única opção que você tem é usar a altura total para tela cheia basicamente. Como o usuário, clique em comparar, basta ocupar todo o espaço disponível com esta caixa de slides para facilitar a comparação. Além disso, notas de rodapé e notas laterais, e layouts de revistas. Então, muitas vezes você acaba com notas de rodapé desconfortáveis em algum lugar na parte inferior onde você tem que saltar para lá do que para saltar para trás, ou notas laterais que realmente meio que são espremidas entre dois parágrafos. Bem, talvez você possa usar algo como notas laterais embutidas, ou como você pode ver aqui, quando há um toque neste ícone, você pode realmente obter informações sobre a nota lateral específica, e ela pode aparecer na fundo ou pode aparecer no topo, é realmente até você. Mas tente colocá-lo em contexto. Você não precisa fazer as pessoas pularem de um lugar para outro. O mesmo vale para PDFs também, porque os PDFs são realmente intrusivos. Quero dizer, você precisa baixar todo o arquivo PDF se quiser ler a página 18. Isto não é muito fixe. Então, talvez você possa realmente mostrar com suas miniaturas. Então, se as pessoas querem baixar o arquivo PDF, eu acho que eles podem realmente ir em frente e baixá-lo, mas pode ser um humax, então pode demorar um pouco. Ao mesmo tempo, basta fornecer algo como exibições de miniaturas muito pequenas, miniaturas muito otimizadas, então, se as pessoas quiserem apenas acessar a página 17, por exemplo, elas podem chegar lá com 50 ou 40 kilobytes sem precisar descarregue todo o PDF. Então, carrosséis não são ruins. Eles não são muito diferentes dos acordeões, apenas ligeiramente mais diferentes na divulgação anterior. Eles precisam de contextos no entanto, então, fornecer algum contexto, alguns detalhes significativos para que as pessoas estejam inclinadas a ir de uma área para a outra. As migalhas de pão podem ser guias ou acordeões, ou tão simples quanto texto simples. Use consultas de mídia verticais, porque muitas vezes eles são muito bom indicador de que você tem um dispositivo móvel. Mostrar comparações de produtos em tela cheia, porque não há outra maneira de contornar realmente. Em vez de colocar notas laterais no lado, ou realmente notas de rodapé na parte inferior, talvez você possa realmente incorporá-las diretamente no conteúdo, e ao mesmo tempo, o que você tem que lidar com muitos PDFs. Forneça miniatura altamente otimizada, algumas pessoas realmente não podem acessá-las muito rapidamente. Isso pode percorrer um longo caminho também. Certo. Então, em seguida, vamos falar sobre imagens, especificamente sobre escalabilidade vertical responsiva. Como podemos usar todo o espaço disponível para fazer o melhor para nossos layouts. 11. Aprimoramento responsivo: Quando lidamos com design responsivo, geralmente temos essa intenção simples de ir do espaço da área de trabalho para o espaço móvel. Estamos nos movendo entre esses dois espaços. Enquanto, ao mesmo tempo, é realmente importante para nós considerar, não só no próprio espaço móvel que é obviamente crucial e importante, mas também este grande display, telas grandes espaço. Então, nós otimizamos muito do desktop para celular, mas talvez devêssemos estar otimizando do desktop para o grande espaço também, porque eles nos oferecem muitas oportunidades para fazer experiência, pois vamos usar muito melhor. Então, vamos ver algumas dessas maneiras. Agora, como Mike Pick escreveu em um de seus artigos analista à parte, “Ao abraçar as últimas telas, podemos ter a oportunidade ou usar a oportunidade de trabalhar dentro de uma dobra maior, apresentando aos usuários mais conteúdo simultaneamente, em páginas mais longas e crie uma experiência de usuário mais rica e expansiva.” Agora, isso fornece um monte de vantagens, porque se você pensar sobre a visão geral que você tem se você vai para um site de e-commerce aleatório, isso é o que a experiência vai se sentir como. Não é apenas verdade para você com muito espaço em branco em todos os lugares, não é apenas verdade para o comércio eletrônico, ele vai ser muito semelhante em jornais também. Aqui temos a MSNBC, que é totalmente responsivo a partir deste automóvel, mas não tanto assim quando você vai mais longe em tudo. O mesmo vale para quartz.com também, onde podemos ter essa grande imagem realmente proeminente no topo, e uma pequena coluna onde o conteúdo reside. Então, talvez possamos torná-lo um pouco melhor. Então, algumas ideias para e-commerce especificamente representadas pelos institutos BiomArt em um dos artigos da revista Smashing, e as ideias são muito simples, e são muito simples de implementar também. Só faz uso do espaço realmente, isso é praticamente tudo. Então, se você puder mostrar cinco itens por linha, basta mostrar cinco itens por linha conforme você aumenta a quantidade de itens que você pode mostrar em sua grade. Também forneça algo como coisas críticas muito importantes, como ordem, então visão geral de pedidos ou acesso à sua conta, ou linha direta de suporte. Muito sutil de uma forma muito sutil, mas em algum lugar à direita ou à esquerda para que os usuários sempre possam ter acesso a ele. Se você tem algo como uma imagem realmente proeminente que você deseja destacar, em vez de torná-los pequenos dentro da grade, deixe apenas quebrá-los grade e mostrá-los de forma muito proeminente. Além disso, o botão Adicionar ao carrinho ou botão Checkout pode ser realmente crítico para ter em mente, olhar, manter disponível o tempo todo. Filtros, falamos sobre preenchimentos em seções de litígio, uma seção em que, se você tiver muitos filtros, talvez queira usar guias potencialmente para apresentá-las na parte inferior da tela, então, quando os usuários clicarem neles, eles tem um pouco de minérios pop, mas se você tem muita segurança, você pode apenas mostrar os filtros. Então, aqui você pode ter um tipo de filtros de cor, filtros de tamanho e assim por diante. Apenas estar presente para que o usuário esteja rolando para baixo a página, ele pode realmente ter acesso para filtrar ainda, porque os filtros que os filtros estão rolando com eles. O mesmo vale para itens visualizados recentemente e Adicionar ao carrinho na página de revisão, e também Resumo do pedido, por exemplo, que geralmente salta para baixo para a parte inferior do paciente na visualização móvel. Deve estar tudo presente. Agora, a ideia é, bem, se você tiver uma forte presença visual? Então, se você tem alguma imagem de fundo visual, o que você sempre pode fazer é apenas estender um pouco. Em uma visualização móvel você pode não ter um espaço para mostrá-lo, mas você certamente aumentar a exibição. Então, você pode apenas usar o espaço, usar uma cor para mostrá-lo.Isso é praticamente o mesmo em todo o fundo ao lado que tem fundo. Você sempre pode estender o fundo um pouco, para que ele não se sinta tão perdido. Agora, há alguns exemplos interessantes do que você pode realmente fazer com ele. Um dos meus favoritos é UNIQLO porque em vez de ter apenas alguns itens, um número restrito de itens que estão sendo exibidos por linha, eles realmente aumentam a escala. Então, às vezes você pode ter um, dois, itens, mas às vezes você pode ter seis, sete, oito, e assim por diante, que faz sentido, transforma uma visão geral do produto em uma parede de produto, que é útil para fazer. Furtado, bicicleta furtado, eles realmente mostram uma imagem grande e proeminente de um produto que eles estão vendendo. Você pode não precisar mostrar o produto tão grande, mas ele vai na direção certa, eles apenas usam o espaço disponível. O grande descontentamento é uma revista, e eles têm um bom layout de grade de revistas, mas eles também sempre usam todo o espaço disponível. Então, uma imagem vai ser realmente grande na visão grande, o legal vai ser, a topografia vai ser, vai parecer muito revista, porque não há largura máxima completamente. Se você rolar, ou ir para baixo e reduzir o tamanho, enquanto eles ainda têm a mesma experiência, é claro que apenas as imagens um pouco menor. Mas é muito bom ter consistência em como eles ficam pequenos, como eles ficam grandes. Às vezes você pode ter um ilustrações realmente complexas que são apenas fáceis de escalar para cima e para baixo. Então, aqui você tem todas essas ilustrações e não importa que altura ou largura você tem, talvez você tenha exibição em tela cheia, ele apenas sendo exibido o tempo todo, faz sentido embora a topografia poderia ser um pouco maior. Mas meu exemplo favorito, de longe, é o exemplo do site do Kremlin, onde se você tiver muito espaço, bem, você tem esse layout de painel duplo, se quiser, onde você tem resultados de pesquisa à esquerda, e tem o conteúdo dessa página à direita, o que faz sentido, é útil. Ao mesmo tempo, se você não tem o espaço, vai ser apenas uma sobreposição. Então, você tem que fechá-lo e então você passa para o próximo. Mas se você tem espaço, é muito bom perceber para navegar porque aqui você pode abrir um, e então ele pode abrir outro, e você pode realmente ter essa visão dupla. Então, faz sentido. Agora, resumindo o que podemos fazer? Embora existam algumas opções, obviamente. Em primeiro lugar, precisamos expandir o design para preencher a tela. Caso contrário, o usuário pode se sentir perdido se você tiver muita tela widescreen e esquerda à direita, e a topografia for pequena. Notas de rodapé e as notas laterais, especialmente em layouts de revistas, podem realmente saltar para o lado à esquerda ou à direita, porque você pode fazer uso do espaço disponível. Você também pode considerar o layout de vários painéis, como o Kremlin ou o Tradus. Você vai estender as grades de produtos, como o UNIQLO faz, onde você apenas mostra mais produtos se você tiver espaço para isso. Mas o mais importante trazer ações importantes para o foco, então coisas como Adicionar ao carrinho ou Checkout, como esses botões críticos, podem sempre ser apresentadas de uma maneira muito agradável, talvez sutil, talvez não tão sutil, os usuários sempre possam ter acesso a eles, porque uma vez que você tem isso, os usuários não se sentirão perdidos, e isso é uma coisa realmente boa. 12. Design complexo de interface responsiva: Então, às vezes, você sabe exatamente que tipo de componentes você precisará. Mas às vezes, você está recebendo um projeto, um projeto estranho, e você tem que trabalhar nele. Ele requer que ele realmente seja criativo e descubra uma maneira de fazer as coisas funcionarem. Não é algo que pode ser apenas louco, talvez de repente você trabalhar em um projeto japonês com linguagem que você não entende ou talvez você precise construir algum jogo muito interessante, interativo, ou algo assim. Isso é factível. Mas, ainda em ambos os casos, o que você precisa descobrir é como criar e fazer com que o trabalho atinja interfaces responsivas. Às vezes, eles só pedem soluções personalizadas. Mais frequentemente, essas interfaces vão ser muito difíceis e muito complexas, e não tão fáceis quanto se pode pensar. Então, vamos dar uma olhada em alguns deles. Um dos mais proeminentes que estão disponíveis, que está em todos os lugares, é claro que o checkout. Podemos pensar que o checkout é um processo relativamente simples, mas não é porque há muitos pontos de contato checkout com o usuário tem que passar. Desde adicionar um item ao carrinho, verificar a política de reembolso ou verificar as opções de pagamento, apreender o endereço de licitação ou endereço de entrega, concluir o pagamento ou talvez descobrir realmente que a autorização falha que não funcionou no final, abandonar o carrinho de compras, login para baixar a fatura eventualmente, e, em seguida, basta terminar tudo e esperar o melhor que eles vão obter o produto. É um processo longo e, infelizmente, em muitos cenários, o comércio eletrônico parece muito tedioso e muito chato. Então, vamos dar uma olhada em alguns exemplos de como torná-lo melhor. Então, aqui está um bom exemplo para isso, para uma experiência de comércio eletrônico realmente agradável. Então, um clube de barbear de dólar, onde eles não têm muitos produtos, mas eles têm alguns. O que eles têm é uma camada muito simples com uma página muito simples, onde você tem opções livres para escolher a partir da área de trabalho, e a visão menor, bem, você gira este pequeno controle deslizante agradável, que você pode usar para navegue entre esses três itens. Então, você pode obviamente ampliar um deles e obter informações sobre isso, e assim por diante e assim por diante. Selecione um item potencialmente e, em seguida, ele será adicionado ao carrinho. Além disso, você ainda pode adicionar mais coisas a ele. Então, aqui, podemos ir para o próximo, se não quisermos mais nada. Você pode voltar usando apenas dois de um. Você também pode alterar o número de itens que deseja escolher. Obviamente, adicione mais itens do achado. Você vê como é rápido, e você vê como é chique? É realmente muito bom. Ele ainda tinha essa experiência agradável carrinho de compras, que é como um pop-up, como uma caixa de luz, mas é realmente muito bom. Pode mudar a quantidade facilmente. É apenas uma experiência muito agradável, muito focada. Tudo bem então, em algum momento, obviamente, você vai acabar no carrinho de compras e é aqui que você vai estar preenchendo os dados, digitando todos os dados do cartão de crédito, eu não vou comprar esperançosamente. Há tão pouco, muitos pequenos detalhes como endereço de cobrança vai ser o mesmo que o endereço de entrega, e este item, o ícone vai estar disponível somente se tudo o resto estiver correto. É apenas uma experiência muito agradável para aqui no site de e-commerce. Outra experiência semelhante é aqui de Harris, onde você tem experiência muito semelhante, mas é apenas muito apertado, muito limpo e agradável. Então, a partir da affordance para botões, e como você adiciona o item ao carrinho e o tamanho da escolha, tudo é projetado como deveria ser. Não tem que ser tão difícil. Durante as opções de envio e assim por diante, então o pagamento não é realmente um grande negócio. Além disso, observe que, por exemplo, quando você deseja corrigir erros, eles permitem que você corrija erros, mas você não precisa. Então, é uma interface muito agradável e muito indulgente. Então, se você quiser ter um bom exemplo de uma experiência de e-commerce que realmente funciona bem, basta olhar para esses dois exemplos, eu acho que eles são realmente bons. Mas às vezes, você pode ter obviamente uma experiência muito diferente, como Typekit. Pense em qualquer interface onde você tem um monte de blob estranho de conteúdo no meio da página, como esta. Você tem muitas caixas diferentes, caixas animadas, na verdade, que fornecem algumas dicas ou informações pairar. Se você simplesmente decidiu colocar tudo em uma única página, isso vai acabar muito mal. Não vai parecer legal, então você não vai criar uma boa experiência com ele. Mas o que você sempre pode fazer nesses casos é transformar esse blob de dados em algo mais gerenciável, como um controle deslizante. Eu gostaria que tivéssemos um pequeno alternar aqui para mover para o anterior e para o próximo, um conjunto de imagens ou opções, mas isso realmente sliders, que você pode deslizar através se você quiser, que é realmente muito bom. É uma maneira muito simples de reduzir essa complexidade que temos para algo mais gerenciável na visualização móvel. Agora, mas às vezes, eles ainda têm algo realmente muito espaço exterior, como este aqui. Então, você tem um pequeno projeto, projeto gerencial, uma pequena plataforma, onde os usuários devem ser capazes de comprar ingressos para shows, eventos, performances de estádio, o que for. Você está querendo não ser capaz de apenas olhar para todas as diferentes áreas disponíveis, mas também para ser capaz de ampliar em uma linha específica onde eles querem sentar, e selecionar o assento onde eles realmente querem sentar, talvez até obter um visualização de como ele vai parecer a partir desse ponto específico. Isso soa como um problema muito complicado. Então, como você lidaria com a criação de uma interface como essa? Como você faria isso funcionar? Bem, você provavelmente vai acabar com algo como, eu não sei, talvez algumas das configurações, padrão onde você pode fornecer, pedir que você apenas nos diga que faixa de preço você gosta, que tipo de assentos você Preferem. Além disso, talvez haja ofertas específicas acontecendo em áreas específicas, e assim por diante. Então, no final, o que você poderia fazer é, ele não está mais disponível aqui. Eu seleciono uma dessas opções específicas que você gosta, que são importantes para você como usuário, ou talvez ajustar alguns filtros como este, e outras configurações para realmente minimizar essa complexidade que você tem que exibir. Ou, você pode acabar com a concepção de componentes personalizados como este, onde você tem que lidar com um toque de guitarra interativo. Então, obviamente, você terá que recalcular o espaçamento diferente entre os diferentes componentes que você está apenas jogando na página, nessas guias diferentes. Isso vai ser um pesadelo, mas se isso for viável, eu acho que praticamente tudo é viável. Se você realmente quer explorar essas interfaces diferentes, bem, vá em frente para sites japoneses ou chineses, porque os sites japoneses e chineses estão muito longe, muito à frente do que nós. Estamos pensando muito em otimizar de desktop para dispositivos móveis, mas eles pensam muito em otimizar para dispositivos móveis para desktop porque eles são os primeiros dispositivos móveis. Então, novamente, pensando sobre esse blob de dados, ou se eles têm uma linguagem visual diferente, bem, você pode aprender muito com eles. Como, esse blob de dados se transforma em algo gerenciável como um conjunto de áreas, elementos de bloco com ilustrações de clientes colocadas em vez dessas imagens grandes. Então, é uma direção estranha, se quiser. O mesmo vale para esta página aqui, onde você tem muitas áreas e também muitas animações acontecendo. Mesmo aqueles pequenos infográficos ou localizadores, se você quiser, ainda serão exibidos de forma proeminente. Eles são responsivos também. Assim, essas áreas, que podem não ser tão fáceis de desenvolver e construir, ainda são responsivas, o que é bastante notável. Então, você acaba com essas experiências, e você pode aprender muito sobre a conformidade e como usar a água, e assim por diante, e assim por diante, apenas fazendo isso. O que você pode fazer? Bem, você pode quebrar a complexidade apenas tentando reduzir a fidelidade. Você não precisa de alta fidelidade o tempo todo. Eu posso perguntar isso, o que é importante para eles, pedir-lhes suas preferências, pensar em maneiras de realmente apresentado melhor para eles, que eles possam realmente navegar nesta interface. Você pode ter em mente o que é importante e priorizá-lo para eles, realmente definindo padrões sensíveis, padrão inteligente faz sentido. Quando você estiver pensando nesses blobs complexos de dados, pense em transformá-los em um controle deslizante, que pode ser fácil de navegar. Quando você pensa sobre o site de comércio eletrônico, apenas certifique-se de que você tem esta regra de um toque em mente o tempo todo. Então, aqueles podem clicar, adicionar um item ao carrinho realmente facilmente, alterar o número de itens, checkout usando padrões inteligentes como definir endereço, definir endereço de entrega, mesmo que endereço de cobrança, e coisas assim. Isso realmente pode percorrer um longo caminho, e apenas uma conduta estendida de forma significativa, porque uma coisa é mostrar um mapa, com assentos e onde as pessoas podem realmente encontrar um bilhete onde eles querem sentar-se, mas é realmente um coisa diferente para criar um bom assistente que iria pedir-lhe especificamente todas as perguntas que precisa para fornecer uma saída significativa em que, e não muito saída. Então, pense sobre as coisas e, em seguida, mesmo a interface mais complexa não tem que se sentir como se fosse realmente complexa e realmente difícil de navegar. 13. Considerações finais: Isso foi uma viagem e tanto. Enquanto nós demos uma olhada em um monte de componentes diferentes, começando de muito pequenos, tipo de mudança de realmente simples como um ícone de hambúrguer e coisas assim, para algo um pouco mais avançado como tabelas, caixas e calendários e como essa e, em seguida, em direção a algo realmente avançado e realmente complexo interfaces de usuário. A questão é o que fazemos com ela agora? Agora, obviamente estou de novo, eu só quero ter certeza de que estamos todos no caminho livre aqui. Eu não vejo que todas essas técnicas, todas as soluções como pontos finais para qualquer projeto. Eu não acho que você pode simplesmente ir em frente e levá-lo e aplicá-lo ao seu projeto imediatamente e apenas terminar o dia. Não é assim que funciona porque o contexto será diferente em seu cenário. Mas eu acho que é realmente valioso, muito útil estar ciente de todas essas coisas diferentes que você pode fazer quando você tropeçar em um problema como este. Então só para saber que tipo de opções você tem quando você tem que lidar com o calendário, quando você tem que lidar com a mesa, nós temos que lidar com todas essas coisas diferentes. Então leve todas essas ideias com você e construa sobre elas para criar algo novo. E as notícias não são novamente como o ponto de vista final e o resultado final do que você está construindo mas sim o início da conversa para seu processo de design, porque isso é basicamente praticamente ele. Isto é o que é. E, obviamente, agora que temos todas essas técnicas no lugar. Não faz sentido sentar e olhar para eles, precisamos colocá-los em prática. Então vamos tentar, vamos descobrir uma boa maneira de realmente fazê-los funcionar dentro do nosso contexto, dentro do contexto do nosso pequeno projeto. Então vamos dar uma olhada no projeto que você pode ver também em sua tela e pensar em todos os diferentes componentes que falamos, mas também aqueles que realmente compõem este layout de revista que falamos, certo. Tente identificá-los, tentar desenhá-los corretamente, tentar certificar-se de que eles se sentem bem juntos e tentar torná-los realmente responsivos de uma forma que realmente se ajusta tanto para telas pequenas, telas muito pequenas e para telas maiores. E então talvez realmente reorganizá-los de uma forma que funcionaria melhor para esses posts não direcionados que temos que projetar. Agora, quando eu penso em design responsivo, na verdade, eu tenho essa visão desse viajante recorde que foi enviado para o espaço em 1977 para se comunicar com alienígenas, os alienígenas possam nos encontrar e fazer o que quiserem conosco. É uma visão muito otimista, mas tudo bem. Porque em algum momento alguém teve que ir a um designer visual, pedir-lhes para projetar uma linguagem visual que resistirá ao teste do tempo e será projetada para alienígenas, certo? Isso é uma tarefa e tanto, eu diria. Não este pequeno projeto que temos que projetar não é tão complicado como você sabe, como este. Mas e neste ponto, temos que pensar sobre o que faríamos em apoio a essa pessoa. Como projetar algo que resistiria ao teste do tempo por anos e anos vindouros. Mas como se vê, o que estamos fazendo hoje com a web não é muito diferente porque podemos criar interfaces, podemos criar experiências que terão que suportar o teste do tempo por anos e anos vindouros. Porque se eles são acessíveis, se eles são rápidos, se eles são criados com um tipo real de manutenção em mente, nós podemos fazê-los realmente, realmente funcionar bem, mesmo daqui a 10 ou 15 anos e ser ambos acessíveis e responsivo e bonito ao mesmo tempo para que nossos usuários realmente, realmente os achem deliciosos. Com isso em mente, espero que você seja capaz de criar essas interfaces. Talvez com algumas técnicas que compartilhamos e discutimos nesta aula. Quero agradecer ao Simon C Page pela capa da turma. Tenho uma situação com o Homer Simpson algures, não sei onde. As ilustrações da seção, as ilustrações animadas foram feitas por Guillaume Kurkdjian de Nantes, França. Ele é um ilustrador incrível. Então, se você está procurando por um ilustrador, ele é uma ótima opção a considerar. Eu também tinha uma imagem hipercubo em uma das primeiras seções e eu realmente espero que isso foi útil e que você será capaz agora capacitado para criar uma interface realmente bonita e eu mal posso esperar para ver seus projetos, esboços, wireframes, qualquer outra coisa no diretório do projeto aqui. Obrigado por fazer parte desta turma. Espero que algumas das técnicas que discutimos hoje, que você descobriu hoje, tenham sido muito, muito úteis para você. Estou ansioso para ver o que vai fazer, o que vai fazer com os projetos. Então sinta-se livre para enviar qualquer coisa, seja como esboços iniciais, rascunhos não tem que ser qualquer maquete apropriado ou qualquer coisa, wireframes, o que seja. Ficarei muito feliz em fornecer alguns comentários, mas talvez possamos descobrir uma técnica ou duas que realmente ajuda ou ajudará a se livrar de algumas coisas irritantes que ainda temos na web às vezes. Como formas, por exemplo, ou praticamente qualquer outra coisa. Então, estou ansioso para ver o que vocês vão inventar e se eu tiver, posso dar algum conselho se pudermos ajudar de qualquer maneira, farei o melhor que puder. Eu acho. Sim, eu vou. Claro. Eu prometo. Garantido. Então, com isso em mente, espero vê-lo em breve e em alguma parte do mundo e ter um dia realmente bom e ansioso para uma conversa com você. 14. Explore o design na Skillshare: maneira.