Domínio da prototipagem de UX: do conceito ao design interativo

1. Introdução: Bem-vindo aos fundamentos da prototipagem de Ux. Olá, sou Manon Battel designer gráfico e de experiência do usuário Neste curso, abordaremos a prototipagem como parte de seu processo de design e como a prototipagem pode criar uma seu processo de design e como prototipagem pode criar Também abordaremos diferentes fidelidades de prototipagem e encerraremos este curso criando um protótipo interativo O curso é uma visão geral da prototipagem e aprenderemos algumas das ferramentas básicas que podem ajudá-lo a apoiar esse processo de prototipagem Então, se você estiver pronto, vamos nos aprofundar nos fundamentos da prototipagem de UX Este curso é aplicável a todos os designers de experiência do usuário, designers gráficos, designers de interface e até mesmo aqueles que desejam aprender mais sobre prototipagem e Destaque, nos vemos na primeira palestra. 2. Os fundamentos da prototipagem no design de UX: O protótipo tem vários significados e várias definições. Então, eu quero definir o termo protótipo para o escopo do curso antes de começarmos Um protótipo é um modelo funcional inicial de um design usado para obter feedback e experimentar rapidamente novas ideias Vários fatores influenciam o tipo de protótipo que você criará, cronograma do projeto, onde você está no processo de design e a robustez do protótipo. Um protótipo pode ser criado com esboços, armações de arame ou maquetes Um esboço é um desenho da interface do usuário em que o design começa a tomar forma Então, os wireframes são a representação de layouts e conteúdos e onde tudo residirá na interface do usuário Os wireframes podem ser em escala de cinza ou preto e branco. Uma maquete geralmente é uma interface de usuário totalmente renderizada com detalhes de cores, tipografia Uma maquete parece um produto final ou um design final. Deixe-me dar uma nota rápida sobre wireframes e maquetes. Às vezes, os termos wireframes e maquetes são usados intercambiável porque as pessoas se referem a seus trabalhos de design como wireframes de forma intercambiável porque as pessoas se referem a seus trabalhos de design como wireframes, mesmo que não tenham cuidado. Ao trabalhar com um sistema de design de robôs, às vezes é mais fácil projetar componentes para que seus wireframes apareçam totalmente renderizados, mesmo que seu trabalho ainda esteja Esboços, wireframes e maquetes são representações estáticas Mas eles não representam a interação projetada por eles mesmos. Você precisa adicionar interatividade ou uma notação a essas telas estáticas para entender como o design interagirá quando alguém realizar uma ação na sua Estou definindo interatividade como qualquer comportamento que altera o estado do design ou a base do fluxo na interação do usuário Exemplos simples de interatividade como um ícone que pode alterar a visualização da página ou, ao clicar nele, o ícone abrirá um menu contextual A forma como o usuário interage com sua interface é o aspecto principal do seu design geral Portanto, a prototipagem nos permite testar nossos diferentes fluxos, validar conceitos de design, analisar ideias diferentes e oferecer ideias diferentes e Um dos principais conceitos da prototipagem é validar seus projetos antecedência e até mesmo com frequência e sem muita sobrecarga Há muitas maneiras diferentes de abordar um problema de design. prototipagem de ideias e conceitos ajudará você a superar as ideias ruins rapidamente e a divulgar novas ideias. Seu protótipo não precisa ser um código. Você pode criar protótipos com qualquer coisa, desde esboços até mesmo usando maquetes totalmente renderizadas E é exatamente isso que faremos neste curso, que levará sua experiência de usuário a um outro nível. Tudo bem, te vejo na próxima palestra. 3. A importância da prototipagem no design de UX: Uma das principais coisas a lembrar sobre prototipagem é não se trata de suas ferramentas É sobre o seu design. Sim, as ferramentas apoiarão e ajudarão com seu design, mas seu design é seu foco principal. prototipagem com toda a fidelidade nos ajuda a eliminar o risco de investir em um produto que não ressoa com o usuário, não é fácil de usar ou não resolve Deixe-me dar mais exemplos sobre por que criamos protótipos A primeira é validar a ideia do novo produto. Por exemplo, a empresa quer criar uma nova ideia ou um novo produto. Então, ao criar um protótipo inicial e testar a ideia de forma econômica, daremos orientação suficiente para determinar se vale a pena investir nele em um produto ou em um futuro, em vez de gastar muitos recursos como fachada A segunda é validar os conceitos ou fluxos de design. Há várias maneiras de resolver um problema de design. E, como parte de seu processo de design, muitas vezes várias ideias e vários layouts podem ser protótipos para determinar qual direção de design é melhor para a empresa e para os usuários A terceira é determinar se a experiência do produto é utilizável ou não Os protótipos dos testes de usabilidade geralmente são mais detalhados e de maior fidelidade Porque, neste momento, a direção do design já foi resolvida e agora o feedback está mais focado em saber se o produto é utilizável ou não Nessa fase, o tipo de feedback que você pode querer procurar incluiria feedback sobre se os rótulos dos botões estão claros e se as interações são compreendidas pelo usuário ou não. Elementos de design, incluindo conteúdo, são ideais para receber feedback neste protótipo de alta fidelidade. A quarta é comunicar uma ideia ou visão. protótipos são ótimos para comunicar com outras pessoas como seu design funcionará Se você apresentar seu trabalho a outras pessoas regularmente, será um bom hábito ter um protótipo à mão para responder à pergunta: como ele funcionará Esses são alguns dos poucos exemplos de por que precisamos de um protótipo. Então, da próxima vez que você criar seu próprio protótipo, tenha esses motivos em mente Tudo bem, nos vemos na próxima palestra. 4. Como mitigar os riscos por meio da prototipagem: Desenvolver produtos sem primeiro receber feedback prévio do seu mercado-alvo é muito arriscado É caro criar um produto sem primeiro determinar se seu mercado é adaptável à sua ideia ou ao seu produto Construindo a experiência errada do produto, custe o tempo de desenvolvimento. Se você tiver uma ideia de produto e criar uma experiência totalmente funcional, poderá descobrir que o produto não é o que o usuário queria. É aqui que a prototipagem pode te ajudar muito. Você descobrirá por meio do processo de prototipagem onde suas ideias de design falham ou onde elas brilham protótipos são úteis para qualquer estágio do processo de design Você pode criar um protótipo apenas para descobrir como sua experiência deve funcionar em um estágio de descoberta Nos estágios posteriores, você pode criar protótipos mais robustos com o objetivo de coletar os feedbacks dos usuários Ao criar protótipos a partir do feedback, determine que tipo de feedback você está procurando pois isso pode influenciar o tipo de protótipo que você criará mais adiante Por exemplo, se você está procurando um feedback mais granular, você quer um protótipo de maior fidelidade usuário possa interagir Com a ajuda de um bom moderador, você pode obter muitos comentários sobre o design com protótipos de baixa Se for uma sessão de moderador, há mais flexibilidade em não ter um protótipo totalmente funcional, porque o moderador pode orientar o usuário nas áreas do protótipo que não estão funcionando. As sessões não moderadas são realizadas por meio nas áreas do protótipo que não estão funcionando. As sessões não de uma plataforma de teste. há mais flexibilidade em não ter um protótipo totalmente funcional, porque o moderador pode orientar o usuário nas áreas do protótipo que não estão funcionando. As sessões não moderadas são realizadas por meio de uma plataforma de teste. Portanto, você quer ter certeza que seu protótipo aguente a tarefa e os cliques que encontrará em um ambiente não A maioria das ferramentas de prototipagem abrange tanto a baixa fidelidade quanto a alta fidelidade. Mas para interações mais realistas, talvez você precise de lógica e condições mais avançadas. Por exemplo, se você precisar armazenar os dados de um usuário ou se precisar abrir um player de vídeo nativo no dispositivo do usuário, essas são necessidades avançadas de prototipagem e você deve ter certeza que tem a ferramenta certa para o trabalho Mas antes de fazer isso, você deve se perguntar essas perguntas. O protótipo precisa ser tão avançado? Porque às vezes queremos manter as coisas realistas e o mais simples possível. A próxima pergunta que você pode fazer a si mesmo é : É importante obter o feedback de que precisa? E, por fim, a simulação da experiência é boa o suficiente para obter um sinal onde o design deve Determinar o tipo de feedback que você precisará ajudará você a decidir como abordar seu protótipo Tudo bem, nos vemos na próxima palestra. 5. Prototipagem e design: principais modelos de processo de design: Você pode estar se perguntando como aplicar seu design thinking em seus produtos, designs ou realmente qualquer coisa. Bem, para responder a isso, existem alguns modelos distintos no processo de design. Basicamente, o processo de design é um método de resolução de problemas. E embora existam alguns modelos distintos de processo de design, a ideia-chave ou o conceito-chave é basicamente o mesmo. Al, isso é gestação. prototipagem é uma fase fundamental no processo de design e, à medida que o produto se torna mais definido, as técnicas de prototipagem também podem mudar de acordo, passando de menor fidelidade para maior fidelidade Antes de entrarmos na fidelidade, vamos dar uma olhada no processo de design O primeiro modelo é o diamante duplo de um conselho de design. O diamante duplo se concentra nas principais etapas do processo de design. Descubra, defina, desenvolva e entregue. O próximo modelo é a abordagem padrão das escolas D com os principais estágios de enfatizar, definir, idealizar, criar protótipos e testar Esses modelos agora têm diferenças, mas todos os modelos de processo de design abordam os mesmos atributos-chave. Eles são centrados no usuário, com foco na empatia com o usuário para entender seus desafios e, ao mesmo tempo, descobrir oportunidades Definindo o espaço do problema com base nesses insights e idealizando por meio de vários conceitos e ideias de design, e idealizando por meio de vários conceitos e ideias de design, criamos possíveis soluções, prototipamos e iteramos essas ideias e conceitos de design e, por fim, entregamos essas ideias-chave O processo de design do centro do usuário é confuso e iterativo e não é tão linear quanto parece. O processo pretende ser uma estrutura na qual você pode criar soluções de design. Idealmente, você deve seguir essas etapas principais em seu design para garantir que esteja focado em projetar as coisas certas e que esteja entregando o produto certo. Por exemplo, você pode estar testando novamente várias ideias e conceitos diferentes Então você pode começar com a prototipagem em papel. E à medida que seu projeto avança para a entrega final, talvez você queira um protótipo funcional mais robusto para feedback de usabilidade e para comunicar seu design à sua equipe Você pode criar protótipos em qualquer estágio do processo de design. E à medida que a fidelidade do design aumenta, a fidelidade do protótipo Em outras palavras, alta fidelidade. Falamos sobre diferentes modelos e protótipos de processos de design modelos e protótipos de processos Na próxima palestra, vamos mergulhar na fidelidade dos protótipos Ou luz, te vejo lá. 6. Os três níveis de fidelidade do protótipo no design de UX: Vamos parar um momento e falar sobre fidelidade. Fidelidade se refere à integridade da interface, interação e fluxo do usuário A fidelidade também pode se referir à aparência visual, mas também à funcionalidade do protótipo Existem basicamente três tipos de fidelidade: baixa, média e, por último, Falaremos sobre cada um deles em detalhes. Aplicar baixa fidelidade é uma boa maneira se concentrar em datar corretamente as interações no fluxo, sem se preocupar demais com a interface visual Um exemplo de quando você deseja usar a abordagem de baixa fidelidade é quando você está na fase inicial de entrevistar seus usuários e tem algumas ideias dos problemas que deseja resolver Mas você quer receber feedback antes de ir muito longe nessa ideia. Nesse caso, esboçar algumas ideias de alto nível e colocá-las na frente do usuário é uma ótima maneira de obter feedback e acompanhar suas reações Os esboços podem introduzir um novo nível de ideias que o usuário talvez não tenha pensado até ver seu esboço Eles podem obter muitos insights excelentes e iniciar muitas novas conversas Um dos benefícios do esboço é que você pode iterar ou repetir rapidamente os conceitos e incorporá-los ao feedback do usuário com muita Protótipos de baixa fidelidade não se aplicam apenas a esboços. Lembre-se de que você pode ter um protótipo de baixa fidelidade interface muito simples, como uma moldura de fio em escala de cinza Algumas ferramentas de prototipagem também são projetadas para estimular uma interface superficial usando formas básicas para transmitir esse baixo nível Os protótipos de média fidelidade podem ter uma mistura de funcionalidades básicas e alguns elementos de interface definidos Mas alguns fluxos podem não estar completos nele. Porque você quer mais informações e mais feedback do usuário para orientar seu design. Por exemplo, em um projeto em que trabalho, coloquei um protótipo de média fidelidade na frente dos meus usuários Apenas alguns links funcionam porque eu queria feedback sobre os links que não funcionaram e queria que o usuário me dissesse aonde acha que deveria ir e por quê. Neste exemplo, o design foi parcialmente definido, mas eu precisava de mais compreensão do usuário para definir o resto do meu design. Normalmente, protótipos de média fidelidade são usados em face do design em que você tem alguns elementos-chave no local, mas ainda precisa validar alguns conceitos para entender melhor as necessidades do usuário protótipos de alta fidelidade são mais usados em cenários em que você tem uma ideia sólida de como a interface de design deve ser e funcionar e deseja um feedback mais específico Como observação, interfaces visuais altamente definidas dão a impressão de que o produto é final e acabado. feedback pode estar no nível da interface, com foco mais em cores, fundos e rótulos fiscais. Mas se você não está analisando esse tipo de feedback, pode permanecer com menor fidelidade para se concentrar mais nos fundamentos das interações e fluxos design de alta fidelidade também é útil para a entrega final, pois permite que todos na equipe de desenvolvimento se envolvam com o design e vejam como ele funciona A prototipagem é útil em qualquer parte do processo de design, e a Fidelity mostra que tipo de feedback você deseja e onde você está no Tudo bem, nos vemos na próxima palestra. 7. Como entender os protótipos de baixa fidelidade no design de UX: Protótipos de baixa fidelidade são uma apresentação aproximada de sua ideia ou design e, na verdade, não estão muito definidos Eles podem ser feitos facilmente em esboços em papéis, mas existem algumas ferramentas digitais que podem estimular essa aparência inacabada E nós os examinaremos mais tarde neste curso. Às vezes, a baixa fidelidade é definida apenas como base de papel, como um esboço no Há algumas nuances nesse debate, mas estou definindo baixa fidelidade para mas estou definindo baixa fidelidade incluir wireframes clicáveis que podem ser criados em um software de prototipagem que imita uma , que podem ser criados em um software de prototipagem que imita uma interface de baixa fidelidade. Há muitas vantagens e vantagens em usar protótipos de baixa fidelidade, especialmente no início do processo de design de UX Algumas vantagens importantes são que os usuários têm maior probabilidade de serem abertos com seus comentários. A baixa qualidade do protótipo dá a impressão de que o design é uma fase conceitual anterior E se você pedir feedback, mais provável que os usuários dêem uma opinião honesta porque ainda sabem que o design está em construção. Continuando, eles são muito fáceis de criar com pouco tempo ou esforço. E se você estiver usando papel, poderá esboçar rapidamente uma ideia e algumas telas principais para entender o conceito básico Eles são fáceis de iterar rapidamente com base no feedback. E se o primeiro conceito de baixa fidelidade voltar a funcionar, você poderá tentar algo novo Com protótipos de baixa fidelidade, você pode facilmente criar uma nova ideia ou conceito com base no feedback do usuário ou em outras coisas que não foram incluídas após o primeiro protótipo e iterar e incorporar esse Há mais foco nas integrações e fluxos quando você cria designs de baixa fidelidade Isso lhe dá a oportunidade de realmente se concentrar na interação e no fluxo sem se preocupar demais com a camada visual Às vezes , pensar no design básico é tudo o que você precisa. Bem, algumas desvantagens dos protótipos de baixa fidelidade são que eles são limitados no fluxo e no comportamento de interação O design de protótipos de baixa fidelidade limita a interação e o comportamento realistas Portanto, você não poderá receber um feedback rico sobre como o elemento da interface funciona. Eles são acionados com facilidade. Às vezes, protótipos de baixa fidelidade não têm clareza suficiente na interface para se destacarem sozinhos para que os usuários Portanto, é necessário que um facilitador oriente o usuário pelo design para que ele saiba o que está vendo e possa ajudá-lo a navegar pelo fluxo e pela interação Em terceiro lugar, é que a usabilidade é indeterminada. Outra coisa importante a ter em mente é que eles são ótimos para descobrir problemas de usabilidade de alto nível, mas não para obter feedback detalhado de usabilidade sobre o comportamento da interação A baixa fidelidade pode relacionar muita imaginação. Sim, existe uma coisa chamada fidelidade muito baixa. Se sua versão de baixa fidelidade for apenas uma caixa para estimular um layout, você está pedindo ao usuário que preencha essa caixa Às vezes, o usuário não tem imaginação ou vocabulário visual para descrever as causas nessa caixa Ainda precisa haver alguma orientação no design discreto que o usuário possa interpretar Mas ainda há muito valor em manter baixa fidelidade durante a fase inicial processo de design Protótipos de baixa fidelidade são úteis e funcionarão em quase todos os projetos, mas são muito úteis no estágio inicial do processo de design Então, da próxima vez que você tiver um projeto difícil e precisar se concentrar no básico e no fundamental, tente usar protótipos de baixa fidelidade e você o ajudará Tudo bem, nos vemos na próxima palestra. 8. Como entender os protótipos de média e alta fidelidade: Os protótipos de média fidelidade podem compartilhar os mesmos atributos dos protótipos de alta fidelidade, como o Luke e o fel, mas podem não ter Protótipos de média fidelidade funcionam bem quando você pode ter parte do design considerado, mas pode não ter uma visão completa do seu design Eles podem ter uma mistura de elementos que podem ser projetados e não projetados ou indefinidos Eles são os melhores dos cenários. Então você se sente muito bem com alguns elementos do design e da interação, mas ainda tem algumas questões em aberto e não sabe qual direção seguir. Você pode ter uma mistura de elementos que estão estabelecidos, mas manter os elementos como espaços reservados Você pode fazer mais perguntas para ajudar a esclarecer que tipo de conteúdo e para onde levar o design. Em comparação, os protótipos de alta fidelidade geralmente estão próximos do design final e temos todas as cores e todas as cores Normalmente, as interações de cliques também estão presentes em designs de alta fidelidade Algumas vantagens dos protótipos de média fidelidade são que eles são flexíveis Eles funcionam muito bem e você tem algumas ideias, mas na verdade ainda não descobriu tudo. Há um pouco mais de flexibilidade na forma como você aborda o design. Agora, algumas desvantagens. Você precisará de um facilitador, especialmente se estiver procurando por novas ideias Talvez seja necessário fazer a imaginação do usuário funcionar ao ver a página com conteúdo do tipo place ser. Além disso, os protótipos de média fidelidade não são confiáveis para detectar problemas de usabilidade pois é muito provável que sejam Os designs de alta fidelidade, por outro lado, têm vantagens exclusivas sobre os designs de média fidelidade. Primeiro, eles são mais representativos da aparência e da sensação do design porque o design parece mais real, realista e os usuários examinarão o protótipo como se tivessem uma experiência normal Em segundo lugar, o design provavelmente não precisa de um facilitador. Se o design estiver quase pronto, de um modo geral, não é necessário um facilitador para orientar o usuário a percorrer o design Talvez você até use um programa de teste remoto que o usuário possa concluir sozinho. A terceira é que os problemas de usabilidade provavelmente serão detectados Qualquer problema de usabilidade que permaneça ou não tenha sido detectado nos primeiros protótipos provavelmente será detectado em designs de alta fidelidade Aqui estão algumas desvantagens dos designs de média e alta fidelidade. A primeira é que eles exigem muito tempo para serem criados. protótipos do alimentador H ih podem ser muito robustos e levará mais tempo para criar um protótipo de polimento totalmente funcional Em segundo lugar, os usuários não estão tão dispostos a dar feedback quanto no nível anterior do protótipo A aparência final do design pode limitar o tipo de feedback que os usuários estão dispostos a dar, porque o design parece muito final e fantástico. Por exemplo, se o fluxo for confuso, eles podem se abster de dizer isso porque podem achar que o design já está concluído e podem adicioná-lo por conta própria E a terceira é que eles são mais difíceis de operar. protótipos de alta fidelidade pode ser demorada criação de protótipos de alta fidelidade pode ser demorada se exigirem muitas interações e casos de uso Como resultado, eles podem ser difíceis de atualizar, especialmente se houver alguns problemas com a funcionalidade principal destacados por meio desse teste. A prototipagem é um aspecto fundamental do processo de design dos EUA. E conhecendo algumas das desvantagens e vantagens, você pode saber qual é a fidelidade certa você e onde você está em seu processo de design 9. Como otimizar o feedback dos usuários: técnicas de prototipagem: Ao criar seus protótipos de design, você deve estar ciente do tipo de feedback que está procurando Você quer ter certeza de que receberá o tipo certo de feedback que será útil para incorporar em seus designs. Ao testar seu protótipo com um facilitador, você precisará de um pesquisador de usuários ou de alguém com uma mentalidade neutra e que também esteja muito familiarizado com o protótipo e os objetivos do É muito importante que o facilitador seja neutro porque você não quer que ninguém faça perguntas importantes ou julgue o usuário de alguma forma Se você estiver testando protótipos de baixa e média fidelidade, o designer e o facilitador colaborarão para responder aos tipos de perguntas que você fará sobre o perguntas que você fará As perguntas dos protótipos de baixa fidelidade serão abertas E a partir de designs de média fidelidade, a pergunta pode variar de aberta a específica E, por fim, a partir de protótipos de alta fidelidade, a pergunta será Você precisará estabelecer uma meta clara do que deseja do seu teste. Portanto, é importante que os facilitadores sejam hábeis em fazer as perguntas certas sem levar o usuário à resposta pesquisa aberta pode ser complicada porque as pessoas terão dúvidas e um bom facilitador poderá deixar o bate-papo fluir, mas trazer de volta o foco para o design, se Normalmente, quando um facilitador entrevista o usuário remotamente ou pessoalmente, equipe do projeto e o designer observam a É fundamental que o designer esteja presente na sessão de pesquisa do usuário para ouvir o feedback diretamente do usuário. Não importa o quão sólido você ache que seu design é, é sempre humilde ouvir um usuário. Às vezes, os designers facilitam suas próprias sessões de design com o usuário, que não é um problema se o designer estiver aberto a todos os comentários, mantiver uma mentalidade curiosa durante a entrevista e puder fazer perguntas sem guiar o Às vezes, quando os designers estão testando seu próprio trabalho, viés de confirmação pode surgir viés de confirmação ocorre quando você espera que seus usuários experimentem o design da maneira que você deseja experimentar lá. E quando o feedback é oposto ou está em 180 graus, eles minimizam ou ignoram esse feedback. O objetivo de testar seu protótipo é descobrir se seu design combina com seu usuário Às vezes vai, às vezes não. Todas essas informações são úteis para nós, pois podemos incorporar o feedback e as ideias na próxima iteração. Agora que aprendemos diferentes tipos de fidelidades e testamos a prototipagem, vamos aprender como criar protótipos em Tudo bem, nos vemos na próxima palestra. 10. Criação de protótipos de papel: Criar um protótipo em papel é um processo muito simples e se concentra mais na compreensão dos atributos de alto nível do seu design, como fluxos, interações e layouts O design em papel precisa de alguém para facilitar a conversa , pois exige um pouco de imaginação do usuário Um facilitador poderá oferecer contextos fornecendo cenários para eles pensarem e ajudar a orientar o usuário se ele ficar preso ou fazer com que o usuário fale mais sobre suas ideias sobre o design A prototipagem em papel é muito fácil de fazer. Você não precisa se preocupar se sabe desenhar ou não, e a fidelidade só precisa ser clara o suficiente para expressar seu ponto de vista em quadrados, retângulos, linhas Tudo o que você realmente precisa é de um marcador preto, papel e algumas notas adesivas. Para testar protótipos de papel móveis, é bom ter um recorte de uma moldura móvel para estimular a visão limitada dos itens na janela de exibição O resto do protótipo pode ser desenhado em papel. Quando você está usando o mesmo protótipo para várias pessoas Às vezes, o papel fica rasgado ou desgastado. Portanto, é muito recomendável usar um peso de papel mais pesado que ajude a evitar isso Digamos que quiséssemos criar um aplicativo de comércio eletrônico para celular. Ao abordar qualquer tipo de protótipo, você deve começar esboçando suas ideias sobre as telas e os layouts, bem como os fluxos Por exemplo, tenho algumas iterações em que acabei de criar algumas abordagens diferentes do meu design Digamos que a página inicial e o tipo de conteúdo que eu quero mostrar Também tenho uma ideia de como a barra de fita deve ser organizada. Você pode ver que isso é muito difícil. E meus esboços são, na verdade sobre colocar várias ideias no papel Você não precisa de perfeição aqui. A próxima coisa que fiz foi criar um fluxo de alto nível de telas principais e interação a partir do design. No meu exemplo, aqui tenho a página inicial, alguns recursos e a capacidade de adicionar um item ao cartão Você pode simular o comportamento de rolagem usando tiras de desenho animado leve e movendo-as para cima e para baixo na janela de exibição do seu modelo ou de lado para o outro para estimular a rolagem da esquerda para a estimular a rolagem Idealmente, você pode desenhar seus designs em retrato para estimular a rolagem cima e para baixo ou em paisagem para interação horizontal com a pontuação Isso é tudo sobre prototipagem em papel e, na próxima palestra, passaremos para Tudo bem, te vejo lá. 11. Fundamentos de prototipagem no Figma: Olá, e bem-vindos de volta, pessoal. A partir desta palestra, começaremos a prototipagem no começaremos a prototipagem Então baixe o Figma e faça login ou cadastre-se na conta Figma Tudo bem, nos vemos na tela do Figma. Eu criei essas telas para uma empresa fictícia chefe de comércio eletrônico usando esses elementos Todos esses arquivos estão na seção de recursos, então não deixe de conferir, e todos esses ativos estão incluídos nela. Então você pode acompanhar o Figma comigo. Vamos analisar o fluxo geral e as interações. Essa é uma empresa fictícia que vende chapéus, e os clientes podem personalizar um chapéu se selecionarem essa opção Na página inicial, você pode colar esse cabeçalho específico e ele o levará à página de detalhes do produto. Você pode rolar esta página e ver o conteúdo de apoio, como detalhes e avaliações. Quando gravo o link para ver as práticas éticas, vejo uma folha inferior com mais informações. Posso arrastar a folha inferior cima e rolar para ver mais imagens. Vamos começar a organizar todas as telas e elementos, bem como iniciar nossa prototipagem conectando-os no Vou usar o tamanho da moldura do iPhone, que é 390 por 844, que é o tamanho padrão do Selecione F no teclado para criar um novo quadro. Para selecionar o tamanho e o tipo de moldura. No painel lateral direito, haverá diferentes tipos e tamanhos de tela. Faça mais dois copiando e colando. Vamos citar a primeira casa de madeira e a segunda, varejo de produtos. E a última, a folha de baixo. Eu tenho os elementos que vamos usar à esquerda e vamos compor as telas usando esses elementos Aqui, eu tenho três quadros. Um do cabeçalho da página inicial, um do conteúdo e o último da barra de guias Vou selecionar o cabeçalho da página inicial da camada e copiá-lo e colá-lo no quadro Eu nomeio home usando command plus C no MC ou Control plus no Windows para copiar. Vou selecionar a moldura inicial e colá-la na moldura. Eu farei a mesma coisa com o conteúdo doméstico. Vou copiá-lo e colá-lo no quadro e reposicioná-lo Por fim, copiarei e colarei elemento da barra de guias no quadro e o reposicionarei Para a página de detalhes do produto, usaremos o mesmo processo. Copie e prove todos os elementos da mesma forma que fizemos na primeira página. Eu vou fazer isso agora. O botão adicionar dois carros aparecerá na parte inferior da tela. Então, vou reposicioná-lo para que fique na parte inferior Na última tela, pegaremos os dois elementos da camada dos elementos da folha inferior e os copiaremos e colaremos na moldura da folha inferior. Para a tela da folha inferior, vou alterar o raio da superior esquerda e direita para dez para coincidir com os cantos arredondados do estilo da folha inferior do cabeçalho Depois de reposicionarmos esses elementos, em seguida, vamos copiar e colar a folha inferior para criar uma segunda folha inferior Agora vamos alterar a altura da segunda folha inferior para 268 e nomeá-la como folha inferior dois Essas são as duas alturas das folhas inferiores. Quando criamos o protótipo conectando isso, queremos simular a interação de arrastar Portanto, precisamos de duas alturas diferentes, a altura mínima e a altura máxima. Organizamos nossas telas para prepararmos para o protótipo Na próxima palestra, conectaremos nosso protótipo e faremos com que ele funcione Todos, não vão a lugar nenhum, e nos vemos na próxima. 12. Como dominar protótipos interativos no Figma: No vídeo anterior, configuramos nossas telas para começar a se conectar ao nosso protótipo e transformar nossa visão em ideias Para esse protótipo, o fluxo começa na imagem do chapéu na página inicial Primeiro, vamos expandir o quadro inicial para mostrar a imagem dentro do quadro. Nosso conteúdo não está visível fora do quadro, mas queremos isso porque isso permite que a área seja rótulo de rolagem dentro dessa janela de visualização quando configuramos isso para rolar Este chapéu com a faixa azul rotulada como paisagem é o item que eu quero conectar à nossa próxima tela No painel lateral direito, há um protótipo de etiqueta de aba Com a tela inicial selecionada, vamos tocar no protótipo Quando você toca nos elementos do quadro no modo de prototipagem Você verá contornos de formas que terão círculos e, ao passar o mouse sobre eles, eles se transformarão em sinais positivos Esses são os pontos de conexão nos quais você pode arrastar as setas para as outras telas para criar interação Vamos adicionar essa conexão do cabeçalho na página inicial à nossa página de detalhes do produto Ao fazer essa conexão, você verá essa janela contextual que permite selecionar o tipo de gatilho em que ele navega e o tipo de interação que você deseja Ao tocar nessa área de interação, obteremos opções diferentes A ação que estou procurando é empurrar. Quando a opção empurrar é selecionada, há quatro setas diferentes indicando a direção da pressão Vou selecionar a primeira seta. Na seta traseira da página de detalhes do produto, adicionaremos essa integração push ou interação push conectando-se à nossa página inicial. Selecionaremos a segunda seta para nos dar o comportamento oposto de empurrar Vamos parecer incríveis e perfeitos para mim. Em seguida, atualizarei a estrutura inicial para que ela volte à altura 844 ajustando a altura no painel de design do lado direito Agora, vamos adicionar a área rolável. Selecione a moldura inicial e fita adesiva no protótipo no lado direito Selecionaremos a rolagem vertical área de comportamento da rolagem Isso definirá o quadro para ser rolável. Queremos que o cabeçalho e a barra de fita permaneçam no lugar. Então, selecionaremos o cabeçalho, acessaremos o painel de prototipagem novamente e selecionaremos a posição fixa na área de comportamento de rolagem Em seguida, selecionaremos a barra de fita e, no painel de prototipagem, selecionaremos corrigir na área de comportamento de rolagem Vamos definir o fluxo para que não haja rolagem. Para a página de detalhes do produto, também queremos garantir que o conteúdo esteja configurando a moldura como vertical. O cabeçalho desta página também deve ser corrigido, assim como o botão Adicionar ao cartão. Faremos a mesma coisa que fizemos na tela inicial selecionando o cabeçalho e alterando a configuração no painel de prototipagem para fixar a posição com o estouro definido como sem rolagem Faremos isso a partir do cabeçalho e do botão de adicionar duas cartas. É hora de pré-visualizar nosso design e vamos ver como ele está funcionando. A rolagem deve ser perfeita. E se você colar na cabeça, verá o produto apertando a página Seu design não está rolando, verifique suas camadas. Você deve ver uma área que diz rolagens e deve ter certeza de que as camadas corretas estão abaixo dessa área de rolagem Se você não conseguir ver a opção de correção no painel do lado direito, tente arrastar o elemento até a área em Fixar no painel de camadas à esquerda No próximo vídeo, configuraremos nossa interação com a planilha inferior usando sobreposições e interação com trapos 13. Prototipagem avançada no Figma: No vídeo anterior, configuramos uma página inicial rolável e uma interação digitada ou digitada para nossa página uma interação digitada ou digitada para nossa Vamos ver as sobreposições da folha inferior e as interações medicamentosas simples Já colocamos todos os elementos na folha inferior, então agora vamos conectá-los. Neste link sobre o varejo do produto, quero colar nele para mostrar a folha inferior. Esta folha inferior armazena informações adicionais sobre como os materiais estão sendo produzidos e adquiridos Eu a desenhei como uma folha de fundo porque alguém só pode colá-la se estiver interessada em aprender mais. A folha inferior tem pontuação horizontal e vertical para mostrar mais informações em um espaço pequeno Vamos começar a conectar esse protótipo. Vou adicionar um retângulo sobre o plutex digitando a letra R no teclado. Em seguida, vamos remover o preenchimento selecionando a forma do retângulo e, em seguida, no painel do lado direito, girando o preenchimento para zero ou removendo-o com o tamanho negativo Com o retângulo selecionado, vá até o protótipo da caneta e conecte o retângulo à pequena folha inferior com o No menu contextual, queremos selecionar a propriedade e selecionar mover para dentro Selecione o último ícone da seta apontando para cima. Na área de configuração de sobreposição, selecione a opção central inferior, que também é mapeada para o último ícone Você desejará selecionar as duas opções para fechar ao clicar fora e adicionar o plano de fundo. Essa configuração mostra onde a folha inferior aparecerá e o comportamento de limpar a folha inferior se o usuário gravar fora dela O plano de fundo se refere ao efeito humilhante que cobrirá a tela quando a folha de botões for acionada Vamos ver como fica. Você pode ver que ele vem de baixo. E quando eu coloco fita no fundo, a folha de baixo volta para baixo, e é exatamente isso que queríamos. Em seguida, vamos fazer com que o primeiro conjunto de imagens na folha inferior seja rolado horizontalmente Fizemos uma rolagem vertical na última palestra, então estamos familiarizados com esse conceito Mas agora podemos definir o conjunto de imagens chamado de rolagem para rolagem horizontal selecionando o grupo de imagens e definindo o estouro Vamos aplicar esse mesmo efeito horizontal na outra folha inferior também. Vamos começar, e parece que está funcionando conforme o esperado. Em seguida, vamos adicionar essa interação de arrastar da alça superior da folha inferior. Selecionará a alça superior e, na seção do protótipo, conectará a alça superior à folha inferior mais alta. Mudaremos a interação para e selecionaremos a sobreposição de pântano e a animação inteligente Aplicaremos as mesmas configurações à folha inferior mais alta, conectando-a novamente à folha inferior menor Na moldura inferior mais alta da folha, selecionaremos o conteúdo para rolar verticalmente e testaremos nosso design 14. Projeto de curso: Olá, e bem-vindos de volta, pessoal. Nesta palestra, discutiremos sobre sua lição de casa ou seu projeto de aula O projeto de aula para você será você terá que fazer uma prototipagem em papel para qualquer ideia, produto ou design Deixe-me mostrar do que estou falando. Como você pode ver na tela, esses são alguns exemplos de prototipagem em papel E não se esqueça e não se esqueça de que já abordamos isso em algumas das palestras anteriores Sinta-se à vontade para fazer prototipagem em papel para qualquer uma de suas ideias. Não se preocupe se você sabe desenhar ou não. prototipagem em papel é muito fácil e qualquer pessoa pode fazer isso.” Dizemos que você pode simplesmente fazer uma prototipagem em papel em apenas um esboço, bem como personalizar sua prototipagem em papel, conforme sua preferência e de acordo com sua preferência O objetivo final desse projeto de classe é começar sua jornada de design de UX. Tudo bem. Depois de concluir a prototipagem em papel, clique na imagem ou anexe a captura de na seção do projeto para obter Isso é tudo para esta palestra e tudo de melhor do seu projeto ou da sua lição de E sinta-se à vontade para me fazer qualquer pergunta, se tiver. Tudo bem, nos vemos em outro. 15. Você conseguiu! Momento de fechamento: Muito obrigado por assistir a este curso. Espero que agora você se sinta confiante em entender como a prototipagem se encaixa em seu processo geral de design e como você pode obter sua melhor interface de usuário e dar vida ao seu design Para saber mais sobre mim, visite meu link e siga-me. Você pode conferir meu outro curso sobre design gráfico no Canva Eu adoraria ouvir mais sobre os projetos em que você está trabalhando e ficaria feliz em responder a quaisquer perguntas que você possa ter. Obrigado novamente e feliz design.